select2 changing items dynamically

Question

I have two selects that are linked: Each value of the first select determines which items will be displayed in the second select.

The values of the second select are stored in a two-dimension array:

[ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...],   [{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...],   ... ] 

The first select value determines the index to be used to populate the second select. So in a 'change' event on the first I should be able to modify the items select-two contains.

Reading documentation I think I need to use the "data" option... but not shure how as the example loads the array data on initialization and it seems to don't work if I try to do the same after initialization.

HTML

Attribute: <select name="attribute" id="attribute">     <option value="0">Color</option>     <option value="1">Size</option> </select>  Value: <select name="value" id="value"></select>  <script>    var data = [ [{"id":1,"text":"black"}, {"id":2,"text":"blue"},...],                 [{"id":"1","text":"9"},{"id":"1","text":"10"},...],               ];    $('#attribute').select2().bind('change', function(){       // Here I need to change `#value` items.       $('#value').select2('data',data[$(this).val()]);  // This does not work    );     $('#value').select2(); </script> 

Answer 1

I've made an example for you showing how this could be done.

Notice the js but also that I changed #value into an input element

<input id="value" type="hidden" style="width:300px"/> 

and that I am triggering the change event for getting the initial values

$('#attribute').select2().on('change', function() {     $('#value').select2({data:data[$(this).val()]}); }).trigger('change'); 

Code Example

Edit:

In the current version of select2 the class attribute is being transferred from the hidden input into the root element created by select2, even the select2-offscreen class which positions the element way outside the page limits.

To fix this problem all that's needed is to add removeClass('select2-offscreen') before applying select2 a second time on the same element.

$('#attribute').select2().on('change', function() {     $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()]}); }).trigger('change'); 

I've added a new Code Example to address this issue.

Answer 2

I'm successfully using the following to update options dynamically:

$control.select2('destroy').empty().select2({data: [{id: 1, text: 'new text'}]});