How to remove options from select element using jquery?

Question

I have n drop-downs like this:

<select id="select1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select id="select2">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>

with identical options. All the choices should be unique, so once the option is selected in one combobox, it should be removed from others. So, if a user selects "1" in select1 there will be only options "2" and "3" in select2.

Now, http://stackoverflow.com/questions/877328/jquery-disable-select-options-based-on-radio-selected-need-support-for-all-brows offers a nice solution, but how can I modify this to work with selects instead of radio buttons?

Answer 1

Is this what you mean?

This would remove everything from #select2 that was in #select1:

$("#select2 option").each(function() {
    if($("#select1 option[value=" + this.value + "]").length)
        $(this).remove();
});

Here's another alternative that removes all duplicates:

$("select").each(function() {
  var select = $(this);  
  select.children("option").each(function() {
    $('select').not(select).children("option[value=" + this.value + "]").remove();
  });
});

This removes every duplicate, leaving he option only in the first <select> it found it in.​

Update for your comment:

$("#select1").change(function() {
 $("#select2 option[value=" + $(this).val()+ "]").remove();
});

Answer 2

Alternatively, if the selects have the same options in the same order.

$('select').change(function() {
    var selectedIndex = $(this).find(':selected').index();    
    $('select').not(this).find('option:nth-child(' + selectedIndex + ')').remove();
)};

I think this way is faster (but less easy to read).