当从另一个 select 中选择了特定选项时，隐藏多个 select 中的选项

Question

I have seen questions similar to this but mine is different. so I have these first 2 dropdown menu (data are selected from my database) and another dropdown which is attributed with multiple , now my code works on the first 2 dropdowns but when it comes to the multiple dropdown it's not working.

here are my dropdown menu;

<select class="custom-select" name="option_one">
 <option>test1</option>
 <option>test2</option>

<select class="custom-select" name="option_two">
 <option>test1</option>
 <option>test2</option>

<select id="multiple" class="custom-select" name="option_three[]" multiple="multiple">
 <option>test1</option>
 <option>test2</option>

Here is my javascript

$(document).ready(function() {
 function intializeSelect() {
  $('.custom-select').each(function(box) {
   var value = $('.custom-select')[box].value;
   if (value) {
    $('.custom-select').not(this).find('option[value="' + value + '"]').hide();
   }
  });
};
 intializeSelect();
 $('.custom-select').on('change', function(event) {
  $('.custom-select').find('option').show();
 });
});



                    

Answer 1

With a single on change attached to all select, you could check value and hide depending on innerHtml or value ( in your case no value, so checking by text),

What I've done is first showing all option, then check value if not undefined, if thre were a value hide other options input, that has same text value,

See below working snippet:

 $(document).ready(function() { $('.custom-select').on('change', function(event) { let value = $(this).val(); // show all options of all select $('.custom-select').find("option").show(); // reset values after change of other select $('.custom-select').not(this).val(""); if (value.length > 0) { $('.custom-select').not(this).find("option").filter(function() { return $(this).html() == value; }).hide(); }; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="custom-select" name="option_one"> <option></option> <option>test1</option> <option>test2</option> </select> <select class="custom-select" name="option_two"> <option></option> <option>test1</option> <option>test2</option> </select> <select id="multiple" class="custom-select" name="option_three[]" multiple="multiple"> <option></option> <option>test1</option> <option>test2</option> </select>