JQuery Select2 不会更改所选的 html 选项

Question

在我的 asp.net 项目中，我使用修改后的列表框控件来显示多选下拉框，我使用 Select2() 直观地呈现该下拉框；

我设置了 AutoPostBack="True"，以便在每次操作后我都可以更改后面代码中的对象。但是，因为 Select2 multiple 不会改变 <select>选项本身，ViewState 无法识别该项目已被选中。

我怀疑如果用 Select2() 选择一个项目会改变相应的 <option>在 <select> ，ViewState 将在重新加载页面时拾取更改并将其标记为选定状态。

ASPX页面:

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

多重选择器控制:

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

隐藏代码:

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

}

请告知我如何将相应的 HTML 元素设置为选定状态。

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

此外，删除现有项目也不起作用。最有可能的原因是所选属性永远不会被删除。

Answer 1

我认为您在代码中犯了一个小“错误”。下面的工作示例 Aspx页面(注意SelectionMode，你没有设置):

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

隐藏代码:

        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);
        }

顺便说一句:您可以编写以下 JavaScript 以确保选择正确的选项。

 $(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");
            }
        });
    });