在 select2 jquery 或 javascript 中的下一个 select 框中隐藏所选选项

Question

I stuck in this issue which is when a user selects an option from one select box the option should be hidden for the other select boxes. When a selected option changes the previously selected option should become available again to the other select boxes.

The problem with my current code:

My code is working when the select box is normal option, if I change to select2 it will not function. Anyone know how to do it if the select box is select2:(?

Code: http://jsfiddle.net/t8170aqg/1/

Answer 1

There are few issues in your code

1. You are using val in option which is not correct your should use value
2. Also you not matching with val() of the selected option in the previous select you are mat aching the text which will be always different.

Edit: You have to use .each to set attr disabled for other options.

Working Fiddle Demo: http://jsfiddle.net/usmanmunir/bqzt1rf9/

Run snippet below to see it working.

Using disabled attr on option

 $(".s").select2() $('.s').change(function() { let value = $(this).val() $(this).siblings('.s').children('option').attr('disabled', false) $('.s').each(function() { $(this).siblings('.s').children('option[value=' + $(this).val() + ']').attr('disabled', 'disabled') }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> <select class="datas_0 s"> <option selected disabled>Choose</option> <option value="1">lim</option> <option value="2">tan</option> <option value="3">alax</option> <option value="4">king</option> </select> <br> <br> <select class="datas_1 s"> <option selected disabled>Choose</option> <option value="1">lim</option> <option value="2">tan</option> <option value="3">alex</option> <option value="4">king</option> </select> <br> <br> <select class="datas_2 s"> <option selected disabled>Choose</option> <option value="1">lim</option> <option value="2">tan</option> <option value="3">alex</option> <option value="4">king</option> </select>