Question

138

Drop down menu for selecting country then states

rated 0 times [ 145] [ 7] / answers: 1 / hits: 22404 / 12 Years ago, sat, july 14, 2012, 12:00:00

I want a to create a drop down menu which generates another drop down menu on the base of selected value
Just for example if select United States from the 1st drop down then 2nd drop down contains the states of United states.
I've done much of the job. I am prefering a javascript and using arrays

var country_arr = new Array(USA, Singapore, Pakistan)

var s_a = new Array();

s_a[0]=;

s_a[1]=CA|NJ|NY;

s_a[2]=paas|naas|taas;

s_a[3]=Islamabad|karachi|lahore;

But I also want the name of the country and state selected, for sending to mysql database.
I guess i've to use double dimensional array for this. But unable to code this time and seriously need your help.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

travion

Add To Favorites

Follow

Total Points: 137

Total Questions: 96

Total Answers: 103

Location: India

Member since Wed, Aug 4, 2021

3 Years ago

travion questions

1 Tagify set data in tagify input on click

Mon, Dec 16, 19, 00:00, 5 Years ago

1 Laravel - How to Import Vue Component to Another Component

Sat, Oct 19, 19, 00:00, 5 Years ago

1 Date conversion in react js

Fri, Sep 20, 19, 00:00, 5 Years ago

1 How can I style react semantic components?

Wed, Nov 14, 18, 00:00, 6 Years ago

1 Problem with onChange for Masked Input in React

Sun, Oct 28, 18, 00:00, 6 Years ago

View All

answered 12 Years ago terrellhunterm · Accepted Answer

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta http-equiv=Content-Type content=text/html; charset=UTF-8>

    <script type=text/javascript>

        var citiesByState = {

            USA: [NY,NJ],

            Singapore: [taas,naas]

        }

        function makeSubmenu(value) {

            if(value.length==0) document.getElementById(citySelect).innerHTML = <option></option>;

            else {

                var citiesOptions = ;

                for(cityId in citiesByState[value]) {

                    citiesOptions+=<option>+citiesByState[value][cityId]+</option>;

                }

                document.getElementById(citySelect).innerHTML = citiesOptions;

            }

        }

        function displaySelected() {

            var country = document.getElementById(countrySelect).value;

            var city = document.getElementById(citySelect).value;

            alert(country+n+city);

        }

        function resetSelection() {

            document.getElementById(countrySelect).selectedIndex = 0;

            document.getElementById(citySelect).selectedIndex = 0;

        }

    </script>

</head>

<body onload=resetSelection()>

    <select id=countrySelect size=1 onchange=makeSubmenu(this.value)>

        <option></option>

        <option>USA</option>

        <option>Singapore</option>

    </select>

    <select id=citySelect size=1>

        <option></option>

    </select>

    <button onclick=displaySelected()>show selected</button>

</body>

</html>