为什么jquery多选控件在动态填充时会停止正常工作？答案

【问题标题】：Why does jquery multiselect control stop working properly when dynamically filling it?为什么jquery多选控件在动态填充时会停止正常工作？
【发布时间】：2015-06-04 13:44:03
【问题描述】：

我有这个代码：

<select id="sState" multiple="multiple" name="sState" size="5"> 
<option value="option1">Option 1</option> 
<option value="option2">Option 2</option> 
<option value="option3">Option 3</option> 
<option value="option4">Option 4</option> 
<option value="option5">Option 5</option> 
<option value="option6">Option 6</option> 
<option value="option11">Option 11</option> 
<option value="option12">Option 12</option> 
</select>

完美运行，CSS 看起来符合预期。

但是，当我想动态填充它时，我必须将 runat="server" 添加到它。然后第一行必须更改为：

<select id="sState" runat="server" meta:multiple="multiple" name="sState" size="5">

一旦我这样做，它就会失去所有的 CSS 格式，看起来像一个列表框。

知道为什么会这样吗？

【问题讨论】：

您的应用程序中有母版页吗？如果是，则不要应用基于 id 的样式。相反，使用 css 类。
我以为样式是基于 js 文件的？它自己应用 ui-multiselect 样式。

标签： c# asp.net jquery-multiselect

【解决方案1】：

出现此问题的原因是多选小部件在部分回发时将自身附加到正文。尝试从 DOM 中删除菜单，然后像这样再次初始化：

<script>
    var pageRequest = Sys.WebForms.PageRequestManager.getInstance();

    pageRequest.add_endRequest(function () {
        $('.ui-multiselect-menu').each(function() {
            $(this).remove();
        });
        $('#sState').multiselect({
            multiple: false,
            header: false,
            noneSelectedText: false,
            selectedList: 1,
            minWidth: 170
        });
    });

</script>

【讨论】：

当我运行它时，我得到：0x800a1391 - Microsoft JScript 运行时错误：'Sys' 未定义