JavaScript - Changing Drop Down Lists

Drop down selection lists are used all the time in forms. It is often usefull to be able to dynamically change the contents of these depending on some user action. With JavaScript and DOM interaction this is not a difficult thing to do.

First the lists of display text and their associated values need to be defined in the JavaScript domain (as opposed to in the HTML) so that they can be assigned to the appropriate drop down. Creating a new empty array is achieved by using the JavaScript new Array() object constructor. The array can populated at create time if desired too by specifying the values as arguments to the constructor. Both methods of array construction have been used in the code below.

<script language="javascript">
var lists = new Array();

// First set of text and values
lists['colors']    = new Array();
lists['colors'][0] = new Array(
	'Red',
	'Blue'
);
lists['colors'][1] = new Array(
	'red',
	'blue'
);

// Second set of text and values
lists['fruits']    = new Array();
lists['fruits'][0] = new Array(
	'Apple',
	'Banana'
);
lists['fruits'][1] = new Array(
	'apple',
	'banana'
);
</script>

Above, we have 2 lists that the user can choose between, one with colors in it and one with fruits. An associative array has been used to hold each of these main lists so that it is easy to see which is which. Inside each of the main lists are 2 further lists (indexed numerically), one for the display text and one for the associated values.

Next we need a form to show the lists in. It is a good idea to name the form too so that it can be located within the DOM easily, the example form has been named drops. A drop down select list has been used to hold the choice of dynamic lists as this is easy to use in the later change script. The name attribute of this drop down has been set (to master) so that it can be easily found in the DOM. The onchange event handler for the main drop down has been set to the JavaScript function that will carry out the necessary actions to change the dynamic drop down select list.

To start with the second drop down select list has been left almost empty. It also has been named (slave) for easy DOM access. For later versions of the popular browsers the width of the drop down is changed according to its option display text list, but with at least Netscape 4 the width is fixed at page render time. So, to make sure that the width is correct for all the lists to displayed in it, the drop down must have at least one HTML option associated when the page is first rendered. The display text for this option has to be sufficiently large to ensure that all subsequent text can be shown correctly.

Lastly the dynamic drop down is loaded with the first of the choice lists by making use of the onload event handler of the HTML body tag. For this example the handler has been set to the same function as the onchange handler of the master drop down.

<body onload="changeList(document.forms['drops'].master)">

This results in the form being loaded with the 'colors' list as shown below. Choosing a different value from the top drop down (master) changes the presented list in the bottom drop down (slave).

So how does this work ? The script below performs the necessary actions. There are 3 functions, one that empties a drop down of options in preparation for receiving a new set, one that assigns a new set of options from a passed in list, and a third that changes the options by calling the other two.

<script language="javascript">

// This function goes through the options for the given
// drop down box and removes them in preparation for
// a new set of values

function emptyList( box ) {
	// Set each option to null thus removing it
	while ( box.options.length ) box.options[0] = null;
}

// This function assigns new drop down options to the given
// drop down box from the list of lists specified

function fillList( box, arr ) {
	// arr[0] holds the display text
	// arr[1] are the values

	for ( i = 0; i < arr[0].length; i++ ) {

		// Create a new drop down option with the
		// display text and value from arr

		option = new Option( arr[0][i], arr[1][i] );

		// Add to the end of the existing options

		box.options[box.length] = option;
	}

	// Preselect option 0

	box.selectedIndex=0;
}

// This function performs a drop down list option change by first
// emptying the existing option list and then assigning a new set

function changeList( box ) {
	// Isolate the appropriate list by using the value
	// of the currently selected option

	list = lists[box.options[box.selectedIndex].value];

	// Next empty the slave list

	emptyList( box.form.slave );

	// Then assign the new list values

	fillList( box.form.slave, list );
}
</script>

JavaScript - Changing Drop Downs