删除选择中的选项

Remove option in select

本文关键字：选项 选择 删除      更新时间：2023-09-26
<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/

如果你需要对某些东西进行排序，请考虑使用像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>

隐藏选项适用于当前的火狐浏览器。我不确定旧版浏览器。隐藏但不删除元素可确保您可以更改选择，而不会削弱输入元素。

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

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

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

// 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();
    });
})​;​

js小提琴

如果您为第二个和第三个选择元素使用不同的类会很容易

$(".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();  
    });
相关文章：