Question

I am guessing this is JS or jQuery but I’m not at all fluent with those (just starting to pick them up after many years of PHP).

I have 3 drop down boxes in a form that are all somewhat identical. All have a list of the same cites that are pulled from a MySQL database and populated via PHP. Let’s say the cities are:

• City 1
• City 2
• …
• City 8

The default values for the 3 drop downs will be:

• Dropdown 1 is City 1
• Dropdown 2 is N/A
• Dropdown 3 is N/A

Basically I just need to make the drop downs work where a city selected in any of 3 automatically removes it from the other 2 drop downs. In the end there can be no duplicate entries in the 3 pull down lists. Also I need it to happen dynamically (onChange event?) so that if they select City 4 in the first list it immediately is removed as an option from the other two drop down lists.

Hopefully this makes sense? Any help is appreciated!

Answer 1

Try this

   var selectedVal, $this, valuesToCheck;
$("select").change(function(){
   selectedVal = $(this).val();
   valuesToCheck = [selectedVal];
  $("select").each(function(){
     valuesToCheck.push($(this).val());
     $(this).find("option:disabled").removeAttr("disabled");
  }).each(function(){
        $this = $(this);
        $.each(valuesToCheck, function(){
            $this.find("option[value='"+this+"']").attr("disabled", "disabled"); 
        }); 
    }); 
});