Sandeep's Nook: JavaScript Page

Dynamic Drop Down List - 2

Given below is an example of the Dynamic Drop Down List - 2 script. Here there are a set of links and a single drop down list. Clicking a link would dynamically change the contents of the accompanying drop down list. Users can add as many options 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 link.

if (link=="Maharastra") {
  document.theForm.theState.value="Maharastra";
  var theOptions=new Array (
   "Mumbai",
   "Nagpur",
   "Kholapur",
   "Nasik",
   "Pune"); }
 else if (link=="Karnataka") {
  document.theForm.theState.value="Karnataka";
  var theOptions=new Array (
   "Bangalore",
   "Mysore",
   "Belgaum",
   "Mangalore"); }
 else if (link=="Kerala") {
  document.theForm.theState.value="Kerala";
  var theOptions=new Array (
   "Calicut",
   "Kannur",
   "Trivandrum",
   "Kochi"); }
 else if (link=="Tamil Nadu") {
  document.theForm.theState.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.theState.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: