Question

I have two select boxes, the first select box has two options:

• First set of colors
• 2nd set of colors

The second one has a few options:

• Red
• Green
• Blue
• Pink

Now when someone selects “First set of colors”, Blue & Pink from the second select box get disabled.
Same with the other option.

The problem is that if you choose “First set of colors” and then “2nd set of colors”, the second select box will still have Blue or Pink selected, even if the option is disabled.

So how can I automatically change its value to a non-disabled option based on the first select box ?

PS: for the disable/enable effect I use this function: jQuery – disable input field based on another field selected value

Answer 1

You could remove the selected attribute from all of the options in your second select when the first select changes, which should leave nothing selected in your second dropdown after the first dropdown has changed.

For example, assuming an id of sets for the first dropdown and colors for the second dropdown:

$("#sets").change(function () {
    $("#colors option:selected").removeAttr("selected");
});

Example (without proper enable/disable setup)