Drop down menu for selecting country then states

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.

<!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>