jQuery的同步多張下拉列表

我有多個下拉列表，並嘗試使用jquery在所有下拉列表同步可用的選項...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>

如果我從dropdowm列表中選擇一個一個項目中，所選的選項將隱藏從別人DROPDOWNLIST RTY QWE ASD ZXC BNM QWE ASD ZXC BNM QWE ASD ZXC BNM

如果我未選擇它，或選擇其他項目，以前選擇的項目將再次顯示在所有下拉列表中 RTY QWE ASD ZXC BNM RTY Q WE ASD ZXC BNM RTY QWE ASD ZXC BNM

下面是我的jQuery代碼，成功地從所有下拉列表中隱藏選定的項目，但無法取消隱藏選定項目。

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

請讓我知道我的代碼中出了什麼問題。感謝您的幫助！

來源

2014-11-17 ec188

爲什麼這個問題看起來似乎很像今天早些時候有人問過嗎？ http://stackoverflow.com/questions/26967751/selecting-the-last-value-from-the-dropdown-and-disable-it-for-other-dropdowns – Abhitalks

您可以存儲陣列您當前選擇的值，然後只是隱藏他們每個人都喜歡：

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

來源

2014-11-17 10:19:52

謝謝！這正是我期待的。 – ec188

什麼是這樣的：

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

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

來源

2014-11-17 09:40:35 dfsq

jQuery的同步多張下拉列表

回答

相關問題