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

Posted 2023-05-07

【中文标题】JQuery Select2 不会更改选定的 html 选项

【英文标题】：JQuery Select2 doesn't change the html option as selected

【发布时间】：2013-03-25 21:05:50

【问题描述】：

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

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

我怀疑如果使用 Select2() 选择一个项目会改变 <select> 中对应的 <option>，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>

此外，删除现有项目也不起作用。很可能是出于与从未删除所选属性相同的原因。

【问题讨论】：

如果有不清楚的地方，请询问。

就像 GoldenEye 中的鲍里斯一样疯狂。与meeeee交谈

【参考方案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");
            
        );
    );

【讨论】：

成功了。难以置信我怎么忽略了那个。