Question

I need some help with jQuery. I have a droplist that is selected retrieved from a function. The list consists of 10 items. I have 10 droplists in my layout. Everytime one of the options are selected from one of the 10 droplists, I want that option removed from all other droplists. The following code is what I’ve come up with so far, but it removes the selected option from the droplist that was first to select one option.

$("select").change(function () {
    $removePlayerID = $(this).attr('value');
    $("#Teamone option[value=" + $removePlayerID + "]").remove();
});

jsFiddle: http://jsfiddle.net/pfX7n/

So when one option is selected, the other droplists don’t have that option anymore.

Thank you in advance.

Answer 1

Try this

 var $allSelects = $('select');

 $allSelects.change(function(){
    $allSelects.not(this).find('option[value='+ $(this).val()+']').remove();    
});

Also remember, once options are gone from a select, they are gone(unless you do some other stuff i mean). So if you change the same select again, the previously removed options in the other selects will not reappear.