在另一个select元素中选中时，隐藏select元素中的选项

Question

我在页面上有多个包含相同选项的选择元素。我想隐藏其他选择元素中的选定选项。

这是我的代码

的一个例子

var $drops = $('.drop'),
  // store a set of options
  $options = $drops.eq(1).children().clone();

$drops.change(function () {
  var $other = $drops.not(this),
    otherVal = $other.val(),
    newVal = $(this).val(),
	
  opts = $options.clone().filter(function () {
    return this.value !== newVal;
  });

  $other.html($opts).val(otherVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dropdown1" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown2" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown3" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown4" class="drop">
   	  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

在此示例中，如果我从第一个选择元素中选择 test1 ，则不能在其他选择元素中将其显示为选项，并且从选择 test2 时然后必须隐藏在其他选择元素等中的第二个选择元素。

Answer 1

这应该可以满足您的需求，同时不允许在多个下拉菜单中选择相同的选项：

＆＃13;

＆＃13;

var $drops = $('.drop');

$drops.change(function () {
  $drops.find("option").show();
  $drops.each(function(index, el) {
    var val = $(el).val();
    if (val) {
     var $other = $drops.not(this);
     $other.find("option[value=" + $(el).val() + "]").hide();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dropdown1" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown2" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown3" class="drop">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

<select name="dropdown4" class="drop">
   	  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
</select>

＆＃13;

＆＃13;

＆＃13;