Question

I have 2 same dropdown lists in my web application that contains same values. Actually, these dropdown lists are for account numbers.
I want to avoid selecting two same items from these lists.
For example if user selects item #1 from the first dropdown list, item #1 must be hided from second one (If this item was not be the first one – Index #0). Also, if user changes his selected item to #2, #1 in the second dropdown must be visibled.

I have written something, but it does not work well:

$('#d1').change(function(e) {
    index = $(this).prop('selectedIndex');
    if (index != 0) $('#d2 option:eq(' + index + ')').css('display','none');
});

Look at it here.

I think I need just a way to make all items visible before hiding the selected item.

Answer 1

Use .siblings()

$('#d1').change(function(e) {
    index = $(this).prop('selectedIndex');
  $('#d2 option:eq(' + index + ')').css('display','none').siblings().css('display','block');
});

​

Here is a demo http://jsfiddle.net/QTDXt/10/