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

Question

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

在我想要 select 选项并将它们放入 selected 框之前，它工作正常。单击选项后，我尝试使用 jquery 添加 'selected' 属性。

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 抓取进行了更改；但是，一旦按下移动箭头，它就不会将选项添加到 selected 列表中。

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

Answer 1

所以这段代码存在多个问题

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

那就是说我已经决定完全放弃使用这个插件并编写自己的插件。双列表仅用于单一目的，因此很难定制。
此外，需要过滤的结果量似乎比它可以处理的要大得多。销毁和重新创建 'display' 多个 selects 的效率非常可怕，每次过滤选项时，Internet Explorer 都会冻结 5 秒，selected 和 deselected。

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

bootstrap dual list - select options manually through javascript?

jquery

multiple-select

twitter-bootstrap