Strange class behaviour; Gets applied to drop list option when it shouldn't...

Question

This is kindof hard to explain...

I have this class:

.nav_option_main {
    background-color: #FC9;
}

I have two drop-lists, let's call them Drp1 and Drp2. Drp2 is populated depending on Drp1:s value, using javascript.

Some values in Drp2 has the above class applied to them, but only some.

Now, here is the strange problem, lets say I have made a selection on Drp1, and the Drp2 is filled with options (using js). Then, if option number 5 in Drp2 has the class applied to it so the background changes, and I change Drp1 to something else, then Drp2:s option number 5 hasn't changed the bgr color (because the class seem to have been cached somehow, and applied to it).

Another example:

I choose fruits from Drp1. Drp2 is populated with lets say 3 fruits, banana, apple, and lemon. Lets say Lemon has the class applied to it, so lemon has a background color! Then if I choose for example countries in Drp1, and Drp2 is filled with 5 countries, the third country's background color is still not changed even though the class isn't applied to it, why? So the countries could be US, Canada, France, Russia, China, in that order. Then France would have the background color attached to it, even though in the code it shouldn't have!

If you need more info just let me know and I will come up with some more examples.

Answer 1

In the js that changes drp2 according to drp1, are you removing the option element and recreating it, or are you just changing the value? The former should work; the latter will result in keeping the class, as you're not changing the element