Disable an option in the drop-down list based on a choice in another list

Question

I have the following code

$('select').on('change', function(){ $('select option').prop("disabled", false); $("select").not(this).find("option[value="+ $(this).val() + "]").prop('disabled', true); }); 

And then there are 3 drop-down lists

 <select name="vote1" id="vote1"> <option value="player1">Player1</option> <option value="player2">Player2</option> <option value="player3">Player3</option> <option value="player4">Player3</option> </select> <select name="vote2" id="vote2"> <option value="player1">Player1</option> <option value="player2">Player2</option> <option value="player3">Player3</option> <option value="player4">Player3</option> </select> <select name="vote3" id="vote3"> <option value="player1">Player1</option> <option value="player2">Player2</option> <option value="player3">Player3</option> <option value="player4">Player3</option> </select> 

With my code, when you select 1 element, it will turn it off in the drop-down list of two other iteams, however, if I then switch to another parameter in another list, it will turn on the options in others.

I want to be able to select an option in one drop-down list, and it remains disabled in all other drop-down lists until it is canceled.

Is it possible?

Js violin

Answer 1

This is almost the same as yours, except that each time each cycle is selected each time it changes, and disables the parameter selected by the other:

 var $selects = $('select'); $selects.on('change', function() { // enable all options $selects.find('option').prop('disabled', false); // loop over each select, use its value to // disable the options in the other selects $selects.each(function() { $selects.not(this) .find('option[value="' + this.value + '"]') .prop('disabled', true); }); }); 

Here is the violin