ChiMo ChiMo - 4 months ago 22x
jQuery Question

bootstrap dual list - select options manually through javascript?

So I needed to change the bootstrap duallist plugin so the filter would display the most relevant options first from typed keywords. The filtered options are then highlighted within the box (it will colour of the text is based on its relevance etc.)

bootstrap dual list

It works fine up until I want to select options and place them into the selected box. I tried using jquery to add the 'selected' attribute once the options have been clicked.

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

This works and I can see all the options changed through a jquery dom grab; however it doesn't add the options to the selected list once the move arrows have been pressed.

I have gone through the documentation, however there isn't any functions for manually selecting options. So how can I do this?


So there was multiple problems with this code

  1. Selected items need to be added or removed through the original multiple select input.
    So var nonselectedBox = $("#bootstrap-duallistbox-nonselected-list_bundle") needed to be $("#list_bundle").
  2. The $.removeAttr function nonselectedBox.find("option").removeAttr("selected"); completely ruins this plugins interactions. Once this command was executed I found the plugin could not be updated whatsoever.
    The correct way to do this is to clear the attribute rather than removing it: nonselectedBox.find("option").attr("selected",false);

That said I have decided to drop using this plugin altogether and write my own. The duallist is only meant for a single purpose therefore makes it quite hard to customise.
Also the amount of results needed to filter on seems to be much larger than what it can handle. The efficiency of destroying and recreating the 'display' multiple selects is utterly horrible and freezes Internet Explorer for 5 seconds every time options are filtered, selected and deselected.