Question

I’ve looked through stackoverflow for an answer and am almost there but need some help.

I have multiple drop down lists with the same options in them. For example three identical lists with the following:

<label for='distlist_1'>Distribution List 1</label> 
<select name='distlist_1'> 
<option value=''>Please Select:</option> 
<option value='1'>All</option> 
<option value='2'>All Managers</option>
<option value='3'>Leavers</option>
</select> 

The only difference being the name eg, distlist_1, 2, 3 etc. I can add ids if necessary.

When a user selects an option in the first drop down list I need it to be removed from all other drops downs. I found a script that did this.

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

But I need it so that if the user then decides, ‘wait I don’t need that option in drop down list 1 after all’, she picks something else and the option reappears in the other drop downs. The code above removes the options then there is no way of retrieving them until if you click enough they all disappear.

Answer 1

I ended up using this as it was concise…

jQuery(document).ready(function() {
var selects = $('.mapping')

selects.change(function() {
var vals = {};
selects.each(function() {
vals[this.value] = true;
}).get();
selects.not(this).children().not(':selected').not(':first-child').each(function() {
this.disabled = vals[this.value];
});
});
});