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

Question

我见过类似的问题，但我的问题不同。 所以我有这前 2 个下拉菜单（数据是从我的数据库中选择的）和另一个属性为 multiple 的下拉菜单， 现在我的代码适用于前 2 个下拉菜单，但是当涉及到 multiple 下拉菜单时，它不起作用。

这是我的下拉菜单；

<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>

这是我的 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

通过对所有 select 附加单个 on 更改，您可以根据 innerHtml 或值检查值并隐藏（在您的情况下没有值，因此通过文本检查），

我所做的是首先显示所有选项，然后检查值是否未定义， 如果有一个值隐藏其他选项输入，具有相同的文本值，

请参阅下面的工作 sn-p ：

$(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>