I have a dropdown select of optional \'opportunities\' (id=\"opportunities\" in the example below) which I enhance using the select2 jquery plugin, and wish to
I managed to solve this using 2 optional functionality provided by the select2 plugin, namely the ability to control the way items are built and displayed using the templating functionality, and using the programmatic control exposed in the plugin. I replaced the javascript appended below the example in the question with,
I have also added an empty element at the bottom in which I dynamically create the rules required to hide the unwanted items.
The code above creates templating function formatItem that the select2 plugin will use to format the items. The item state object is passed to the function which includes the unique id for each item.
This id is modified by appending the class of the corresponding option element.
When a group option is selected in the 2nd dropdown select (#group-select) a set of styling is created and appended to the bottom element to hide all the elements whose id attributes end with the class names to be hidden, for example if one seleced group-1, the code will create a style to hide group-2 items,
li[id$="group-2"] {
display:none;
}
However for this to work we need to force the select2 dropdown to refresh to pick up the new styling and the only way I found for this work was to use the programmatic control of the plugin to 'open' and immediately 'close' the select2 dropdown.