JavaScript - Modifying List Contents Dynamically

1 Overview

From time to time you may wish to implement a solution that when you choose an option in the first select (drop down list), the contents of a second drop down list change.

This can be done using JavaScript. The below is a sample approach.

2 Setup

Build a form and add two drop down lists to your form. Question 1 and Question 2. For the purposes of this example X is the Form Id of the form. strCDA_X_field_0_1 is the first question and strCDA_X_field_0_2 is the second question.

You populate the first list with three options. XXXXX, YYYYY and ZZZZZ, just as an example. Remember to put the values in the text and the value fields. This is standard list management. The second list you put just one entry in called "Please select a Question 1 item" as the text and a single minus as the value.

You then create the function as follows in the JavaScript onLoad of the form.

// A generic function to add an option to a select
function fn_Add_Item ( objObject, strText, strValue ){
	var objOption = document.createElement('option');
	objOption.text = strText;
	objOption.value = strValue;
	objObject.options.add(objOption);
}

// The Dynamic Content function
function fn_DynamicLists ( strQuestion1, strQuestion2 ){
	
	//First we make sure the elements exist on the page.
	if ( document.getElementById(strQuestion1) && document.getElementById(strQuestion2)){

		//We extract what Question 1 has been set to
		var strValue1 = document.getElementById(strQuestion1).value;
		
		//For convenience, we extract the object
		var objQuestion2 = document.getElementById(strQuestion2);
		
		//We blank the contents of Question2
		objQuestion2.options.length = 0;
		
		//Now we add in our dynamic elements
		if ( strValue1 == 'XXXXX' ){
			fn_Add_Item ( objQuestion2, 'XXXXX - 1', 'XXXXX - 1' );
			fn_Add_Item ( objQuestion2, 'XXXXX - 2', 'XXXXX - 2' )
		}
		else if ( strValue1 == 'YYYYY' ){
			fn_Add_Item ( objQuestion2, 'YYYYY - 1', 'YYYYY - 1' );
			fn_Add_Item ( objQuestion2, 'YYYYY - 2', 'YYYYY - 2' )
		}
		else {
			fn_Add_Item ( objQuestion2, 'Error - Not handled', '' );
		}
	}
	else {
		alert ('Sorry items not found.');
	}
}

Now in the onChange event of Question 1, you need to put in the dynamic function name i.e. fn_DynamicLists ( 'strCDA_X_field_0_1', 'strCDA_X_field_0_2' ); Please don't forget the semicolon at the end of the function. (It's good programming practice!)

Now your form should work dynamically. Choose XXXXX from Question 1 and the list in Question 2 should change to XXXXX - 1 and XXXXX - 2.

Choosing ZZZZZ should put an error message into Question 2.

This code is reusable and could be put into a centralised function for reuse in other campaigns with similar combo drop down lists. Copy form will also work with this code as reusable.

3 Validation

When adding validation to the form, it is possible to use the bxp engine to ensure at least 2 characters has been put in Question 1 and in Question 2. As the ZZZZZ example shows, do not put a value in, and the validation will show the box as being empty.

4 Cascading

It is possible to extend the functionality to cascade so that level 1 affects level 2, affects level 3, affects level 4 and so on. All n One have worked examples of where this has been achieved already for blue chip clients.