Javascript Country, State Dropdown List

The underlying code for the javascript code is located here. It is held within a separate file. The code works.

There are some extra procedures within the JavaScript file. No server side code gets employed.

Note some important things about the script... the javascript split function gets used. Split, a string function, creates and fills an array with items. The string itself contains a list of state names separated by a pipe symbol.

This script demonstrates how to use the indexSelected property of a combobox to point to another option.

It also demonstrates how to use a form in combination with named cells to access and change the contents of disabled "text" <input>s.

NOTE: The script also demonstrates how to fill Text Inputs with JavaScript.

How The Javascript Code Works

One string with a length of 2083 characters holds all the country names separated by pipe symbols. The name of the string that holds the country names is, sCountryString.

A javascript array gets created to hold all the state names. The state names get placed into an array named, aStates. Each array element holds one string, a pipe separated list of state names.

The Fill_Country() function fills the first combobox named, cboCountry, with country names. Javascript must be enabled for this to happen.

The Fill_Country() Function

| Countries | Fill_Country() | Fill_States() | Clear_Form() | Update_Globals() |

/*
 * Fill_Country()
 * gArCountryInfo matrix holds the following data:
 * (0) Country name
 * (1) Name length
 * (2) Number of states
 * (3) Max state length
 * 
 * gLngNumberCountries and aStates must get
 * set prior to calling this function.
 * 
 */
function Fill_Country() {
 var i=0;
 var sCountryName="";
 
 // reset cboCountry.options
 document.form1.cboCountry.options.length=0;
 
 for (i=0;i<gLngNumberCountries;i++) {
  gArCountryInfo[i]=new Array(4);
 }
 
 for (i=0;i<gLngNumberCountries;i++) {
  document.form1.cboCountry.options[i]=new \
  Option(sCountryString.split("|")[i]);
  sCountryName=document.form1.cboCountry.options[i];
  
  // gArCountryInfo[i][0]=sCountryName;
  // gArCountryInfo[i][1]=sCountryName.length;
  // gArCountryInfo[i][2]=aStates.split("|")[i].length;
  // gArCountryInfo[i][3]=0;
  gArCountryInfo[i]=
    [sCountryName, 
    parseInt(sCountryName.length),
    aStates,
    0];
 }
 
 fInitgArStateInfo();
 
 return;
}

Upon loading of the html page, two more functions get called, one named Fill_States() and then one named, Clear_Form().

The Fill_States() Function

| Countries | Fill_Country() | Fill_States() | Clear_Form() | Update_Globals() |

When the end user selects/changes the country, the Fill_States() gets called.

/*
 * Fills cboState from aStates
 */
function Fill_States() {
 var i=0, iLen=0, iNumStates=0;
 
 // reset cboState
 document.form1.cboState.options.length=0;
 // get selected country
 gLngSelectedCountry=document.form1.cboCountry.selectedIndex;
 iNumStates = aStates[gLngSelectedCountry].split("|").length;
 // update the text boxes
 Update_Globals();
 
 document.form1.txtNumCountries.value=gArCountryInfo.length-1;
 document.form1.txtNumStates.value=iNumStates;
 
 // file the state combobox with the list of states
 for (i=0;i<iNumStates;i++) {
  document.form1.cboState.options[i]=new 
    Option(aStates[document.form1.cboCountry.selectedIndex].split("|")[i]);
 }
 updSelectState(0);
 return;
}

The Clear_Form() Function

| Countries | Fill_Country() | Fill_States() | Clear_Form() | Update_Globals() |

The Clear_Form() function fills all the textboxes with an empty string.

function Clear_Form() {
 document.form1.txtCountry.value="";
 document.form1.txtState.value="";
 document.form1.txtCountryLength.value="";
 document.form1.txtStateLength.value="";
 document.form1.txtNumStates.value="";
 document.form1.txtSelectedState.value="";
 document.form1.txtSelectedCountry.value="";
 document.form1.txtNumCountries.value="";
}

When the end user selects/changes the state, another function, Update_Globals() gets called.

The Update_Globals() Function

| Countries | Fill_Country() | Fill_States() | Clear_Form() | Update_Globals() |

The Update_Globals() function updates some text inputs on the HTML form, and a couple global variables.

• gLngSelectedCountry (An index of the selected country in the cboCountry combobox.)
• gLngSelectedState (An index of the selected state in the cboState combobox.)
• form1.txtSelectedCountry (The textbox that displays a 1-based index of the selected country.)
• form1.txtSelectedState (The textbox that displays a 1-based index of the selected state.)
• form1.txtState (Gets a copy of the selected state name. Demonstrates the use of the .value property for input (textbox, type="text").)
• form1.txtCountryLength (Displays the size of the country string, demonstrates use of JavaScript's .length property.)
• form1.txtStateLength (Displays the size of the state string. Shows use of the .length property.)

/*
 * gArCountryInfo matrix holds the following information:
 * (0) Country name
 * (1) Name length
 * (2) Number of states
 * (3) Max state length
 */
function Update_Globals() {
 gLngSelectedCountry=parseInt(document.form1.cboCountry.selectedIndex);
 gLngSelectedState=parseInt(document.form1.cboState.selectedIndex);
 document.form1.txtSelectedCountry.value=gLngSelectedCountry;
 document.form1.txtSelectedState.value=gLngSelectedState+1;
 
 // working
 document.form1.txtCountry.value=
   document.form1.cboCountry.options[gLngSelectedCountry].text;
 if (document.form1.txtSelectedState.value<=0) {
  document.form1.txtState.value="";
 }
 else {
  document.form1.txtState.value=
   document.form1.cboState.options[gLngSelectedState].text;
 }
 
 document.form1.txtCountryLength.value=document.form1.txtCountry.value.length;
 document.form1.txtStateLength.value=document.form1.txtState.value.length;
 
 return;
}

Congratulations!

| Countries | Fill_Country() | Fill_States() | Clear_Form() | Update_Globals() |

We hope the information helps you in your HTML and JavaScript journeys.