Question

我有多个下拉列表，并尝试使用jquery同步所有下拉列表中的可用选项...

<select class="abc" id="test1">
    <option value="" selected></option>
    <option value="1">RTY</option>
    <option value="2">QWE</option>
    <option value="3">ASD</option>
    <option value="4">ZXC</option>
    <option value="5">BNM</option>
</select>
<select class="abc" id="test2">
    <option value="" selected></option>
    <option value="1">RTY</option>
    <option value="2">QWE</option>
    <option value="3">ASD</option>
    <option value="4">ZXC</option>
    <option value="5">BNM</option>
</select>
<select class="abc" id="test3">
    <option value="" selected></option>
    <option value="1">RTY</option>
    <option value="2">QWE</option>
    <option value="3">ASD</option>
    <option value="4">ZXC</option>
    <option value="5">BNM</option>
</select>

如果我从其中一个下拉列表中选择一个项目，则所选选项将隐藏其他下拉列表 RTY QWE ASD ZXC 国行 QWE ASD ZXC 国行 QWE ASD ZXC 国行

如果我取消选择它或选择其他项目，则会在所有下拉列表中再次显示之前选择的项目 RTY QWE ASD ZXC 国行 RTY QWE ASD ZXC 国行 RTY QWE ASD ZXC 国行

以下是我的jquery代码，设法隐藏所有下拉列表中的所选项目，但无法取消隐藏所选项目。

$('.abc').change(function(){
    $('.abc').each(function(){
        if($('.abc').val() != '') {
            $('option[value="'+$(this).val()+'"]').hide();
        } else {
            $('option[value!="'+$(this).val()+'"]').not(this).show();
        }
    });
});

请告诉我代码中的错误。谢谢你的帮助！

Answer 1

这样的事情：

var $abs = $('.abc').change(function() {
    $abs.children().show()
        .end().not(this)
        .find('[value="' + $(this).val() + '"]').hide();
});

演示：http://jsfiddle.net/vw9z8bk1/1/

Answer 2

您可以将当前选定的值存储在数组中，然后只隐藏它们中的每一个，如：

 var vals = new Array();
 $('.abc').change(function() {
    vals = [];
    $('.abc').each(function(){ 
        var val = $(this).val();
        if (val != ""){
            vals.push(val);
        }
        $('option').show();
        for (var i = 0; i< vals.length; i++){
            $('option[value="' + vals[i] + '"]').hide();
        }
    });
});

Fiddle

Jquery同步多个下拉列表

2 个答案: