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

Question

我有多个具有相同选项但互斥的选择框。例如，如果选择框 A 和选择框 B 有选项 1、选项 2 和选项 3，那么如果我为选择框 A 选择选项 1，那么它应该不可用在选择框 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();

                          }); 

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

您可以在下面的 fiddle 上看到，如果我从选择框 1 中选择选项 1，则选项 3 中的“选择下方”也会被删除，我想将其置于异常(exception)状态 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>