trouble with onfocus script embedded dropdown menu

[boo_lolly]

alright here's the explanation.

 

i have two dropdown menus in a form. one is a list of countries, the other is a list of states. i want to write a script that will display the states  dropdown only when the country 'america' is selected in the countries dropdown. 'america' is pre-selected by the way. here's what i'm workin with so far. i really don't know much javascript but i think i'm somewhere on the right track. let me know what you guys think.

    <script type="text/javascript">
        function focused()
        {
            statedropdown = '
                <select name="stateslist">
                    <option value="texas">Texas</option>
                    <option value="delaware">Delaware</option>
                    <option value="montana">Montana</option>
                </select>
            ';
            document.getElementById('states').innerText = statedropdown;
        }
        function cleartext()
        {
            document.getElementById('states').innerText = '';
        }
    </script>

    <form>
    <div>
        <select>
            <option value="china">China</option>
            <option value="usa" onfocus="focused()" selected>USA</option>
            <option value="australia">Australia</option>
        </select>
    </div>
    <div id="states">

    </div>
    </form>

 

any help?

[emehrkay]

use object literals, it will be very easy to parse and loop through.

 

var countries = {

USA: {

Alabama: 'alabama',

Texas: 'texas'

},

};

 

Then you have you country drop down

<select id ="country_drop"> ...

 

In the head of your doc you will listen for a change in that select element

 

onload = function(){

var country_drop = document.getElementById('country_drop');

var states = document.getElementById('states');

var states_list;

country_drop.onchange = function(){

//go to the country in the countries object

states_list = countries[country_drop.value];

//loop through that list and create the drop from there

for(var x in states_list){

//create your elements here

}

//write your elements to the page

};

};

 

I hope that is a good start for you