jQuery after selecting from a dropdown remove the same line from other dropdowns on the page

Is it possible to remove items from all dropdowns, except from the one where I choose from?

I have auto-generated dropdowns from my PHP code which makes a dropdown for every participant. The purpose of the dropdown is to give every participant a number to see who's the strongest (1) and the weakest (4 for example, depends on the amount of participants).

Now we've got the following;

John -- dropdown from 1 t开发者_C百科o 4 here --

Jeniffer -- dropdown from 1 to 4 here --

Lloyd -- dropdown from 1 to 4 here --

Julian -- dropdown from 1 to 4 here --

My goal is that when I select "1" from John's dropdown, that "1" disappears from the other people their dropdowns (so just 2, 3 and 4 are the remaining options).

Thanks

You can use .not to exclude the element the event was triggered on. Something like:

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

Best if you give the select elements their own class.

DEMO

But you would also have to make sure to add an option again if the user changes his selection. In the worst case, if all options are set by the user, the user cannot change is selection anymore as there is nothing to select from. Consider this scenario.

if it is a select with options:

$('option').click(function(){
    $('option:contains(' + $(this).html() +')').not(this).remove();
});