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

Question

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

这是 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 和对其demo page 的测试。