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

4

4 回答 4

5

如果您需要对某些内容进行排序，请考虑使用诸如jQuery UI之类的可排序的东西，因为一堆下拉菜单会为此带来非常糟糕的用户体验。

但要回答你的问题：

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 中有效。我不确定旧版浏览器。隐藏但不删除元素可确保您可以更改选择而不会削弱输入元素。

于 2012-06-17T13:31:47.377 回答
3

你去http://jsfiddle.net/Calou/9N9Tz/6/。

当 s 的值发生变化时，只需取这个值，在其他s 中<select>搜索具有这个值的s 并将其删除。<option><select>

$(".one").change(function(){
    var val = this.value
    if (val !== '') {
        $(this).siblings().find('option[value=' + val + ']').remove()
    }
})
于 2012-06-17T13:32:54.193 回答
1

如果您对第二个和第三个选择元素使用不同的类，这将很容易

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

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

  $(".one").change(function(){
        var val = parseInt($(this).val());
        $(this).siblings().find('option:contains('+val+')').remove();  
    });
于 2012-06-17T13:29:48.603 回答
1 
// 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

于 2012-06-17T13:34:20.683 回答