JavaScript Pull Down Menu

I would like to create three Pull Down Menus..... This is how they would look. continents would be the first Pull Down menu, the second would be countries, So if one picks from the first say Africa, the second would have only the countries in Africa. And when one clicks the second one, that is picking a country ... say Sudan, then the third Pull Down will have states/provinces in Sudan.

How do I do this? I want something that is simple and basic?

I will stor开发者_如何学运维e it in JavaScript data type ... {"North America":[The USA, Canada] , "Africa":["Kenya", "Tunsia", "Morroco"]}

I would recommend using the jQuery library to make data binding very simple. Assuming you had your data types defined like you stated in your question, you could have json object containing all of the information. I.E. you have {Continent:[Countries:[states/provinces], ...], ...) then all you would have to do for the first selector is display the continents by getting the keys of the object. Then you would populate the second pull down with the keys defined by the value, (another json string), of the key selected. Next based on the Country sub-string, create another JSON object and search by key again based on the second pull down's selection. Finally you would populate the third pull down with the value located at the country key.

Basically what you have is a 2 tiered JSON object, level one contains Continents as keys with a value of level 2, which contains Countries as keys with States/provinces as values.

If you know all of the data, there is no reason to create a data object to hold the data, a JSON string will be sufficient.

The below is what I was looking for. I just figured it out. Thanks James Khoury

            <form id="someform" >
            <select id="sample"  onChange="myfunction(this)"> 
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            </select>
            </form>
            <form id="someform" >
            <select id="samp" > 
            <option value="1">Fire Power</option>
            </select>
            </form>
            <script type="text/javascript">
            function myfunction(myObj) {
            var myselect=document.getElementById("samp")
            try{
            myselect.add(new Option("New Last Option", "0"), null) //a
            "sample"
             myselect.add(new Option("New First Option", "1"), myselect.options[0]) 
             }
             catch(e){ //in IE, try the below version instead of add()
             myselect.add(new Option("New Last Option", "0")) 
             myselect.add(new Option("New First Option", "1"), 0) 
             }
             }
             </script>