bootstrap双列表 - 通过javascript手动选择选项？

Question

所以我需要更改bootstrap duallist插件，以便过滤器首先从键入的关键字中显示最相关的选项。然后在框中突出显示已过滤的选项（文本的颜色将基于其相关性等）

它工作正常，直到我想选择选项并将它们放入选定的框中。我尝试使用jquery添加＆＃39;选择＆＃39;单击选项后的属性。

var nonselectedBox = $("#bootstrap-duallistbox-nonselected-list_bundle")
nonselectedBox.find("option").removeAttr("selected");
$(this).find("li.selected").each(function() {
    nonselectedBox.find("option[value='" + $(this).text() + "']")
        .attr("selected", "selected");
});

这有效，我可以看到通过jquery dom抓取改变了所有选项;但是，一旦按下移动箭头，它就不会将选项添加到所选列表中。

我已经阅读了文档，但是没有任何手动选择选项的功能。那我怎么能这样做呢？

Answer 1

因此，此代码存在多个问题

1. 需要通过原始的多选输入添加或删除所选项目 因此var nonselectedBox = $("#bootstrap-duallistbox-nonselected-list_bundle")需要$("#list_bundle")。
2. $ .removeAttr函数nonselectedBox.find("option").removeAttr("selected");完全破坏了这个插件的交互。执行此命令后，我发现无法更新插件 执行此操作的正确方法是清除属性而不是删除它：nonselectedBox.find("option").attr("selected",false);

那说我已经决定完全放弃使用这个插件并编写自己的插件。 duallist仅用于单一目的，因此很难定制 此外，过滤所需的结果量似乎比它可以处理的大得多。破坏和重建“显示器”的效率。每次选项被过滤，选择和取消选择时，多次选择都非常可怕并冻结Internet Explorer 5秒钟。