javascript - 删除选择中的选项

Question

<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<br />
<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<br />
<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

$(".one").change(function(){

})

我想要制作 - 例如，如果我在第一个位置选择选项 1，那么我其他人选择这个选项应该被删除。因此，如果我在第一个选择中选择 1，然后在选择第二个和第三个中，我只有选项 2 和 3。如果在第二个选择中，我选择 2，那么在最后一个选择中，我只有选项 3。

我怎样才能做到？我想使用 jQuery。

直播:http://jsfiddle.net/9N9Tz/1/

Answer 1

如果您需要对某些东西进行排序，请考虑使用类似 jQuery UI sortable 的东西因为一堆下拉菜单会导致非常糟糕的用户体验。

但要回答你的问题:

var $selects = $('.one');
$selects.on("keyup click change", function(e) {
  $selects.not(this).trigger('updateselection');
}).on("updateselection", function(e, data) {
  var $this = $(this);
  $this.children().show();
  $selects.not(this).each(function() {
    var value = $(this).val();
    if (value) {
      $this.children('[value="' + value + '"]').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="one">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br />
<select class="one">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br />
<select class="one">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

隐藏选项在当前的 firefox 中有效。我不确定旧版浏览器。隐藏但不删除元素可确保您可以更改选择而不会破坏输入元素。