选择中删除选项

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的东西进行排序,因为一堆下拉菜单会让用户体验真的很糟糕.

但要回答你的问题:

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.我不确定遗留浏览器.隐藏(但不删除)元素可确保您可以更改选择而不会削弱输入元素.