忽略多个 select 框中的第一个选项-jquery

Question

我有多个 select 盒子，它们具有相同的选项，但互斥。例如，如果 select 盒子 A 和 select 盒子 B 有选项 1、选项 2 和选项 3，那么如果我 select 选项 1 用于 select 盒子 A，那么它不应该在 select 盒子 B

上可用

我的示范

<select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>

 $('.alert_type').change(function() { 
                           var selected_value=$(this).val();
                          $(".alert_type option[value='" + selected_value + "']").not(this.selectedOptions[0]).hide();

                          });

但我想将第一个选项作为例外，即 <option value="">Select below</option>，因为我需要灵活地恢复所有选项

你可以在下面的 fiddle 上看到，如果我 select 选项 1 来自 select 框 1，"select below" 来自选项 3 也被删除我想例外 Fiddle https://jsfiddle.net/timus2001/rbuyk7na/3/

当我尝试

$(".alert_type option").show();

一开始显示全部不再互斥了（见图）

Answer 1

好的。让我看看这次能不能找到你：

 $('.alert_type').change(function() { 
 var selected_values = [],
    iteration;
  $(".alert_type option").show();
  $(".alert_type").each(function(){
   iteration = $(this).find('option:selected').val();
    if ( iteration !== "" ) {
     selected_values.push( iteration );
    }  
  })
  for ( var i = 0; i < selected_values.length; i++ ) {
   $(".alert_type option[value='"+ selected_values[i] +"']").hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select" class="alert_type">
        <option selected>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>

Answer 2

这就是你需要的：

$('select.alert_type').on('change keyup',function() {
 var val = $(this).val();
 $('select.alert_type option').prop('disabled',false);
 $(this).siblings().find('option[value='+val+']').prop('disabled',true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>
    <select name="select" class="alert_type">
        <option selected disabled>Select below</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
    </select>

祝你好运:D

忽略多个 select 框中的第一个选项-jquery

Ignore 1st option from multiple select box-jquery

javascript

jquery

jquery-selectors

这就是你需要的：