JQuery Select2 doesn't change the html option as selected

Question

In my asp.net project I use a modified Listbox control to show a multiple selection dropdownbox, which I present visually using Select2();

I set AutoPostBack="True" so that after every action I can change an object in code behind. However because Select2 multple does not alter the <select> option itself, ViewState doesn't recognize the item as selected.

I suspect that if selecting an item with Select2() would alter the corresponding <option> in the <select>, ViewState would pick up the change and mark it as selected when reloading the page.

Aspx page:

<cc1:MultiSelector ID="txtUsers" runat="server" CssClass="select" multiple="multiple"  OnSelectedIndexChanged="txtUsers_SelectedIndexChanged"></cc1:MultiSelector>

Multiselector control:

public class MultiSelector : ListBox
{
    public IEnumerable SelectedItems
    {
        get
        {
            ListItemCollection items = this.Items as ListItemCollection;
            return this.Items.OfType().Where(item => item.Selected);
        }
    }
}

Code Behind:

protected void txtUsers_SelectedIndexChanged(object sender, EventArgs e)
{
  // Do something with the selected items

}

Please advise on how I can set the corresponding HTML element as selected.

<option value='3' selected="selected">Item3</option>

Also, removing an existing item doesn't work. Most likely for the same reason that the attribute selected is never removed.

Answer 1

I think you made a small "error" in you code. Below working example Aspx page (pay attention to SelectionMode, which you did not set):

<cc1:MultiSelector ID="txtUsers" AutoPostBack="true" SelectionMode="Multiple" runat="server" CssClass="select" OnSelectedIndexChanged="txtUsers_SelectedIndexChanged"></cc1:MultiSelector>

Code behind:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                for (var i = 0; i < 10; i++)
                {
                    txtUsers.Items.Add(new ListItem { Value = i.ToString(), Text = "option1 " + i.ToString() });
                }
            }

        }

        public void txtUsers_SelectedIndexChanged(object sender, System.EventArgs e)
        {
            foreach (ListItem item in txtUsers.Items)
            {
                if(item.Selected)
                    Debug.WriteLine(item);

            }
            Debug.Write(e);
        }

BTW: you can write following JavaScript to be sure that proper option is selected.

 $(function () {
        $('select').change(function (evt) { 
            if (evt.added) {
                $(evt.target).find("option[value=" + evt.added.id + "]").attr("selected", "selected");
            }
            if (evt.removed) {
                $(evt.target).find("option[value=" + evt.removed.id + "]").removeAttr("selected");
            }
        });
    });