Jquery 同步多个下拉列表

Question

I've multiple dropdown lists and try to use jquery to sync available options in all dropdown list...

<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>

If I select one item from one of the dropdown list, the selected option will be hide from others dropdownlist

<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>

If I un-select it or select another item, the previous selected item will be show again in all dropdown list RTY QWE ASD ZXC BNM RTY QWE ASD ZXC BNM RTY QWE ASD ZXC BNM

Below is my jquery code, managed to hide selected item from all dropdown lists, but not able to un-hide selected item.

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

What is wrong in my code?

Answer 1

What about something like this:

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

Demo: http://jsfiddle.net/vw9z8bk1/1/

Answer 2

You can store your current selected values in array and then just hide every of them like:

 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