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

Question

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

，直到我想选择的选项，并放置到选定的盒子，它工作正常了。一旦选项被点击，我尝试使用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更改;但是一旦移动箭头被按下，它就不会将选项添加到选定列表中。

我已经通过了文档，但是没有任何手动选择选项的功能。那我该怎么做？

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秒。