如何在修改 DOM 后重新初始化 jQuery 中的函数

Question

使用 jQuery 插件 (Link to Plugin Code) 我尝试实现一个多 select 下拉菜单。然后我想动态地（取决于用户输入）更改菜单项。第一部分工作正常，但更改菜单项到目前为止还没有。因此我想寻求帮助。

这是HTML部分：

<select id="Fruits" name="Fruits" multiple="" style="display: none;">
    <option value="1">Number1</option>
    <option value="2">Number2</option>
    <option value="3">Number3</option>
</select>

然后我使用该代码初始化菜单：

$(function(){
   $('#Fruits').multiSelect({'noneText':'Select Fruits'});
});

结果正是我想要的：

接下来我尝试动态添加菜单项。我通过以下代码做到这一点：

   var option = document.createElement("option");
   option.text = "Number4";
   option.value = "4";
   var select = document.getElementById("Fruits");
   select.appendChild(option);

这是我希望实现的：

然而，结果看起来与第一张图片完全一样。还有运行

$(function(){
   $('#Fruits').multiSelect({'noneText':'Select Fruits'});
});

再次无济于事。

Answer 1

从 <select> 获取 MultiSelect 实例 (.data("plugin_multiSelect")) 并在添加新元素后调用 .updateMenuItems():

$("select").data("plugin_multiSelect")
           .updateMenuItems();

--
答案基于source code and a test on their demo page.

如何在修改 DOM 后重新初始化 jQuery 中的函数

How to reinitialize a function in jQuery after having modified the DOM

javascript

html

jquery

multi-select