Dynamic Select Statements

<!DOCTYPE html>
<head>
<title>Dynamic Select Statements</title>
<script type="text/javascript">
 var countryLists = new Array(4)
 countryLists["empty"] = ["Select a Country"];
 countryLists["North America"] = ["Canada", "United States", "Mexico"];
 countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"];
 countryLists["Asia"] = ["Bangladesh", "Russia", "China", "Japan"];
 countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"];
 function countryChange(selectObj) {
 var idx = selectObj.selectedIndex;
 var which = selectObj.options[idx].value;
 cList = countryLists[which];
 var cSelect = document.getElementById("country");
 var len=cSelect.options.length;
 while (cSelect.options.length > 0) {
 cSelect.remove(0);
 }
 var newOption;
 for (var i=0; i<cList.length; i++) {
 newOption = document.createElement("option");
 newOption.value = cList[i];
 newOption.text=cList[i];
 try {
 cSelect.add(newOption);
 }
 catch (e) {
 cSelect.appendChild(newOption);
 }
 }
 }
</script>
</head>
<body>
  <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="North America">North America</option>
    <option value="South America">South America</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
  </select>
  <br/>
  <label for="country">Select a country</label>
  <select id="country">
    <option value="0">Select a country</option>
  </select>
</body>
</html>