Dynamic Drop Down Box (Part 2)

Part 2 of 3
The code featured in part 1 of this tutorial relied on a fixed number of countries in the first select box. If the number of options in the first select box were greater we would have to add more case statements to our function. In this respect, the function code is not flexible enough. In this part of the tutorial, I am going to show you how to change the function to match any number of options in the first and second select boxes. Let's start with building a form first:

<form name='frm'>
<select name='select1' size=5 onchange='fnSelect(this)'>
 <option></option>
</select>

<select name='select2' size=5>
 <option></option>
</select>
</form>

The function call on the select box change event has one argument - this. It refers to the select box itself. The first select box remains empty for the time being. We will fill it later.
Now, let's create arrays of countries and cities. The first element in each array will hold the name of a country, the other elements will hold city names.

var arr1 = new Array('Canada', 'Toronto', 'Montreal', 'Vancouver');
var arr2 = new Array( 'USA', 'Boston', 'New York', 'Washington', 'Houston');
var arr3 = new Array( 'France', 'Paris', 'Marseille', 'Lyon' );
var arr4 = new Array( 'England', 'London', 'Manchester', 'Liverpool', 'Leeds');

The next step is to construct an object literal that will hold all the arrays.

var obj={
 a:arr1,
 b:arr2,
 c:arr3,
 d:arr4
}

The object literal variable names (a, b, c, d) are not important. The important thing is that they should refer to each array holding names of the countries and the cities. Now that we have an object literal obj, we can iterate through all properties of an object using the for .. in object. The following statemet will display an alert with the names of the countries : Canada, USA, France, England.

 for(var i in obj){
  alert(obj[i][0]);
 }

In this case, obj[i] refers to an array contained in each variable of the obj object, and obj[i][0] refers to the first element of the array.
Now we can construct a function that wiil be called on selecting an option in the first select box.

function fnSelect(sel){
 for(var i in obj){
  if(sel[sel.options.selectedIndex].text == obj[i][0]){
   addItems (document.frm.select2, obj[i]);
   break;
  }
 }
}

On each iteration we obtain a reference to the country name : obj[i][0] , and then check it against the option selected in the first select box : sel[sel.options.selectedIndex].text. If both are equal we call the addItems() function passing it a reference to the second select box and the array containing city names.
Here is a modified addItems() function:

function addItems (sel, arr){
 var len =sel.length-1;
 for(var i =len; i>=0; i--){
  sel.remove(i);
 }

 for(var i=1; i< arr.length; i++)
  sel.options[i-1] = new Option(arr[i], arr[i]);
}

It is slightly different from the code listed on page 1 of this article in the part dealing with the array of city names. First of all, we start our iteration with the second element because the first element contains a country name. However, we should replace all options in the second select box starting with 0. That's why we subtract one from the i variable : sel.options[i-1] = new Option(arr[i], arr[i]) when we build a new option element.
The only thing left to do now is to populate the first select box with the country names:

function populateSelect(){
 var sel =     document.frm.select1;
 var sel2 =    document.frm.select2;
 var i=0;
 for(var x in obj) {
  if(i==0)
   addItems(sel2, obj[x]);
  sel.options[i++] = new Option(obj[x][0]);
 }

I think the code must be clear by now. We introduce a new variable i to keep track of the option element index. We fill the second select box with the city names from the first array.

if(i==0)
 addItems(sel2, obj[x]);

Try it here:

Part 3 of the tutorial.