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然后我其他选择此选项应该被删除。因此，如果我在第一次选择i选择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。我不确定遗留浏览器。隐藏（但不删除）元素可确保您可以在不损坏输入元素的情况下更改选择。

Answer 2

在这里你http://jsfiddle.net/Calou/9N9Tz/6/。

当<select>的值发生变化时，只需获取此值并在其他<option>中搜索具有此值的<select>并删除它们。

$(".one").change(function(){
    var val = this.value
    if (val !== '') {
        $(this).siblings().find('option[value=' + val + ']').remove()
    }
})

Answer 3

如果你对第二和第三选择元素

使用不同的类，那将很容易

$(".one").change(function(){
    var val = parseInt($(this).val());
    $('.two,.three').find('option:contains('+val+')').remove();  
});

编辑：
更新了代码以申请多项选择。 [感谢所有评论员和Alex让它注意到]

  $(".one").change(function(){
        var val = parseInt($(this).val());
        $(this).siblings().find('option:contains('+val+')').remove();  
    });

Answer 4

// As soon as all selects have one class, you'll have to distinguish them:
$(".one").each(function() { 
    // Now this corresponds to one select (in the loop over all)
    $(this).change(function() {
       // Fix what've done before
       $('option').show();
       // Find every other select, find an option in it
       // that has the same value that is selected in current select
       // (sorry for the description)
       $('.one').not(this).find('option[value=' + $(this).find('option:selected').val() +']').hide();
    });
});

jsFiddle

选择中删除选项

4 个答案: