显示和隐藏选择选项

Question

I've created a very basic form that has 2 dropdown lists.

Each list contains the same entries:

<option value='1234:0'>Closed</option>
<option value='4567:2'>Open</option>
<option value='6857:1'>Dead</option>
<option value='9856:1'>Alive</option>
<option value='0000:0'>Other</option>

If an entry in dropdown 1 is selected, then that entry should be removed from dropdown 2

If a different entry is selected in dropdown 1, then that should be removed from dropdown 2 and the original entry returned to dropdown 2

if nothing is selected in dropdown 1, then all options should be shown in dropdown 2.

I've created a FIDDLE, showing how far I've got... it's not very far.

Can any one help with this ?

Thanks

Answer 1

Try this

$(function(){

    $('#test').change(function () {

        var selected = $(this).val();   

        $("#test2 option").show();

        $("#test2 option[value='" + selected + "']").hide();

    }); 

}); 

If you want to use text you can try this

$(function(){

    $('#test').change(function () {

        var selected = $('option:selected', this).text();

        $("#test2 option").each(function(){

            if($(this).text() == selected) {

                $(this).hide();

            } else {

                $(this).show();
            }

        })

    }); 

});