Mohamed Ali Khochtali Mohamed Ali Khochtali - 5 months ago 24
jQuery Question

update jquery select2 available choices for multiple instances

I have two jquery select2 instances that have the same options and the same class
I want that each time I select an option in one select2 instance it becomes not available in both instances

<select class="select2-element" multiple="multiple"> //instance 1
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>

<select class="select2-element" multiple="multiple"> //instance 2
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>

Answer

What about giving the second <select> tag an id such as <select id="changeSelect"...

and adding adding a listener in jQuery like:

$('select2-element').on('change', function() {
  var selectValue = $(this).val(); 
  $('#changeSelect').val( selectValue);
});

I might also suggest getting rid of the select2-element class on the first <select> tag in order to prevent the second one from dynamically selecting on itself