jquery同步多个下拉列表答案

【问题标题】：Jquery sync multiple dropdown listjquery同步多个下拉列表
【发布时间】：2019-12-14 12:04:15
【问题描述】：

我有多个下拉列表，并尝试使用 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>

如果我从下拉列表中选择一项，所选选项将对其他下拉列表隐藏

<select class="abc" id="test1">
    <option value="1" selected>RTY</option>
    <option value=""></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=""></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=""></option>
    <option value="2">QWE</option>
    <option value="3">ASD</option>
    <option value="4">ZXC</option>
    <option value="5">BNM</option>
</select>

如果我取消选择它或选择另一个项目，之前选择的项目将再次显示在所有下拉列表中 RTY QWE 自闭症谱系障碍 ZXC 国行 RTY QWE 自闭症谱系障碍 ZXC 国行 RTY QWE 自闭症谱系障碍 ZXC 国行

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

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

我的代码有什么问题？

【问题讨论】：

为什么这个问题与今天早些时候提出的这个问题看起来非常相似？ stackoverflow.com/questions/26967751/…

标签： javascript jquery drop-down-menu

【解决方案1】：

您可以将当前选择的值存储在数组中，然后将它们隐藏起来，例如：

 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

【讨论】：

谢谢！这正是我想要的。

【解决方案2】：

这样的事情怎么样：

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

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

【讨论】：