Sandeep's Nook: JavaScript Page

Dynamic Drop Down List - 1

Given below is an example of the Dynamic Drop Down List - 1 script. Choosing a state from the first drop down list would dynamically change the contents of the second drop down list. Users can add as many options to the list as they wish. Details about how to edit the script are explained in the code.

Author: Sandeep Gangadharan
Home Page: http://www.sivamdesign.com/home/

The script is given below:

This goes in the HEAD of the html file:

//====================== this portion within the dotted line can be edited. For each new state copy and paste
// a whole IF statement and change the name of the state and the cities. Do make sure that the spelling of the
// state that appears in the IF statement is the same as that in the drop down list.

if (document.theForm.firstChoice.value=="Maharastra") {
  var theOptions=new Array(
   "Mumbai",
   "Nagpur",
   "Kholapur",
   "Nasik",
   "Pune"); }
 else if (document.theForm.firstChoice.value=="Karnataka") {
  var theOptions=new Array(
   "Bangalore",
   "Mysore",
   "Belgaum",
   "Mangalore"); }
 else if (document.theForm.firstChoice.value=="Kerala") {
  var theOptions=new Array(
   "Calicut",
   "Kannur",
   "Trivandrum",
   "Kochi"); }
 else if (document.theForm.firstChoice.value=="Tamil Nadu") {
  var theOptions=new Array(
   "Madras"); }

//======================
// Do not edit anything below:

i = document.theForm.secondChoice.options.length;
 if (i > 0) { document.theForm.secondChoice.options.length -= i; document.theForm.secondChoice.options[i] = null; }

var theCount=0;
for (e=0; e<theOptions.length; e++) {
  document.theForm.secondChoice.options[theCount] = new Option();
  document.theForm.secondChoice.options[theCount].text = theOptions[e];
  document.theForm.secondChoice.options[theCount].value = theOptions[e];
  theCount=theCount+1; }
}

// NOTE: [document.theForm.firstChoice.value] will get you the name of the state
//   and [document.theForm.secondChoice.value] the name of the city chosen
// -->
</script>

This goes in the BODY of the html file: