Question

我有选择框，我想隐藏（删除）已选择的选项中的项目：

<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select name="gets" class="gets">
<option value="0">SELECT</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

因此，如果我从第一个选择框中选择选项1，它将从其余选项中消失，如果我在选择框4上选择选项3，它将从其余选项中消失

提前致谢

Answer 1

如下所示：

$('.gets').change(function(){
    var value = $(this).val();
    $('.gets').not(this).find('option[value="'+value+'"]').hide();
})

DEMO

如果您想排除SELECT选项，请说明如下

$('.gets').change(function(){
    var value = $(this).val();
    if(value!=0)
        $('.gets').not(this).find('option[value="'+value+'"]').hide();
})

Answer 2

您需要在其他选项中找到具有相同值的所有选项并隐藏它们。我会用这样的东西：

var selects = $('select');
selects.bind('change', function(e) {
    var val = this.value;
    //show all options
    selects.find('option').show();
    selects.each(function() {
        if(!this.value) return;
        //hide the selected value in the other selects
        selects.find('option[value="' + this.value + '"]')
                .filter(':not(:checked)')
                .filter(':not([value="0"])')
                .hide();
    });    

});

Example

Answer 3

你可以试试这个：

$("select").on("change", function(){
    var selectVal = $(this).val();
    $("select").not($(this)).find("option[value="+ selectVal +"]").remove();   
});

fiddle

5个选择框，隐藏每个所选项目的值

3 个答案: