Dynamic Select Box values from a Multiple Select Box

Hi, I am new here and let me open with the question which is the reason I joined this site:

I have a selection box multiple with countries which supports multiple selections being made. Depending on the Country or Countries selected in the countries box I want to change the options in the State box. I have got it working when only one Country is selected. Problem is that the State values are reset when I select multiple countries.

Is there a way to get the following: A client selects the USA from Countries. The State box is filled with the US states. Now when the client also selects France from Countries the list of US States remains and the French States are added giving me a list with both the US and the French States?

Thanks for the quick answer Xxavier, thinks work fast here it seems :)

I will give that a try but will that work with multiple selections? It should place the states for all the selected countries in the first selection box. Not replace them each time I click on another country.

Like I expected that solution makes the States come up only for one Country. What makes this problem tricky is the support of multiple selections. Re-read my original question please.

To further illustrate using Xxavier's example: When both the first and second option from the first box are selected then the second box should give: blah 1,blah 2,blah 3,blah 4
At this moment it depends on what I click last which two blahs are shown.

A possible solution I see would be to retrieve the values of all selected choices in the first selection box and loop through those adding the values for the second box as we go along. Just no clue on how to write such a thing....

I tried them all and only Devic's solution seems to work like it is supposed to. My only question before I rap this question up: will this work on all browsers and if not which are excluded? I tested it on IE6 and NS7. How far back can we go before this stops working?

Thanks again guys, this platform finally seems to be what I am looking for!

Featured Post

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

This article discusses the difference between strict equality operator and equality operator in JavaScript.
The Need:
Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…

Nothing in an HTTP request can be trusted, including HTTP headers and form data. A form token is a tool that can be used to guard against request forgeries (CSRF). This article shows an improved approach to form tokens, making it more difficult to…

The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)

The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…