Dynamic Dropdownlist with JavaScript

<head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>Dynamic Select Statements</title> 
<script type="text/javascript">
 //<![CDATA[
    // array of possible countries in the same order as they appear in the country selection list 
    var countryLists = new Array(4)
    countryLists["empty"] = ["Select a Country"];
    countryLists["USA"] = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming", ];
    countryLists["Canada"] = ["Alberta", "British Columbia", "Manitoba", "New Brunswick", "Newfoundland and Labrador", "Nova Scotia", "Ontario", "Prince Edward Island", "Quebec", "Saskatchewan", "Northwest Territories", "Nunavut", "Yukon", ];
    countryLists["Mexico"] = ["Aguascalientes", "Baja California", "Baja California Sur", "Campeche", "Chiapas", "Chihuahua", "Coahuila", "Colima", "Distrito Federal", "Durango", "Estado de México", "Guanajuato", "Guerrero", "Hidalgo", "Jalisco", "Michoacán", "Morelos", "Nayarit", "Nuevo León", "Oaxaca", "Puebla", "Querétaro", "Quintana Roo", "San Luis Potosí", "Sinaloa", "Sonora", "Tabasco", "Tamaulipas", "Tlaxcala", "Veracruz", "Yucatán", "Zacatecas", ];
    /* CountryChange() is called from the onchange event of a select element. 
    * param selectObj - the select object which fired the on change event. 
    */
    function countryChange(selectObj) {
        // get the index of the selected option 
        var idx = selectObj.selectedIndex;
        // get the value of the selected option 
        var which = selectObj.options[idx].value;
        // use the selected option value to retrieve the list of items from the countryLists array 
        cList = countryLists[which];
        // get the country select element via its known id 
        var cSelect = document.getElementById("country");
        // remove the current options from the country select 
        var len = cSelect.options.length;
        while (cSelect.options.length > 0) {
            cSelect.remove(0);
        }
        var newOption;
        // create new options 
        for (var i = 0; i < cList.length; i++) {
            newOption = document.createElement("option");
            newOption.value = cList[i];  // assumes option string and value are the same 
            newOption.text = cList[i];
            // add the new option 
            try {
                cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
            }
            catch (e) {
                cSelect.appendChild(newOption);
            }
        }
    } 
//]]>
</script>
................................html................................
</head>
<body>
  <noscript>This page requires JavaScript be available and enabled to function properly</noscript>
  <h1>Dynamic Select Statements</h1>
  <label for="continent">Select Continent</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">Select a Continent</option>
    <option value="USA">USA</option>
    <%--<option value="South America">South America</option>--%>
    <option value="Canada">Canada</option>
    <option value="Mexico">Mexico</option>
  </select>
  <br/>
  <label for="country">Select a country</label>&nbsp;<select id="country">
    <option value="0">Select a country</option>
  </select>
</body>
Ebook Download
View all
Learn
View all