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();

                          });

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

您可以在下面的小提琴中看到，如果我从选择框1中选择选项1，则从选项3中“选择下方”也会被删除，我想将其置于例外 小提琴 https://jsfiddle.net/timus2001/rbuyk7na/3/

当我尝试

时

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

首先显示所有内容不再相互排斥（参见图片）

Answer 1

确定。让我看看我这次能不能找到你：

＆＃13;

 $('.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();
  }
});

＆＃13;

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

＆＃13;

Answer 2

这就是您所需要的：

＆＃13;

$('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);
});

＆＃13;

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

＆＃13;

祝你好运：D

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

2 个答案:

这就是您所需要的：