Chained Selects Examples: Share a list group on the same page

We can re-use the same list group with different sets of select lists on the same page, but each of these sets of select lists will still follow the same setting of default options.

If we need to have different settings of default options for different sets of select lists, we need to "hack" the CS a bit.

Once the initListGroup() is called after the page being loaded, CS populates the select lists and takes over their onchange event handlers. When an option is picked from a select list, CS is invoked to update the sub-lists according to the setting of default options.

After the select lists are populated, we can use selectObject.selectedIndex or selectObject.options[n].selected to set the selected option for the top-list, then trigger the onchange event handler of the top-list to have CS update the sub-list, and repeat the same procedure for all the sub-lists.

For example, we have a list group for two sets of three select lists: vehicle makers, types and models, and we want to have different default options for these two sets.

Following is the regular setup of re-using a list group for different sets of select lists:

<head>
<script language="javascript" src="chainedselects.js"></script>
<script language="javascript" src="content.js"></script>

<script language="javascript">
function initCS() {
  var form = document.forms[0];
  initListGroup("vehicles", form.maker1, form.type1, form.model1);
  initListGroup("vehicles", form.maker2, form.type2, form.model2);
}
</script>
</head>

<body onload="initCS()">
...
<select name="maker1"></select>
<select name="type1"></select>
<select name="model1"></select>

<select name="maker2"></select>
<select name="type2"></select>
<select name="model1"></select>
...

To set up the different default options, we have, for example:

<script language="javascript">
function initCS() {
  var form = document.forms[0];
  initListGroup("vehicles", form.maker1, form.type1, form.model1); 	// populate the select lists with original default options
  initListGroup("vehicles", form.maker2, form.type2, form.model2);

  setTimeout("initLists()",0);
}

function initLists() {
  var form = document.forms[0];

  form.maker1.selectedIndex = 2; 	// pick an option from the maker1 top-list
  form.maker1.onchange(); 		// refresh the sub-lists of type1/model1

  form.maker2.selectedIndex = 2;
  form.maker2.onchange();

  setTimeout("initLists2()",0);
}

function initLists2() {
  var form = document.forms[0];

  form.type1.selectedIndex = 1; 	// pick an option from the type1 sub-list
  form.type1.onchange(); 		// refresh the model1 sub-list

  form.model1.selectedIndex = 2; 	// pick an option from the model1 sub-list

  form.type2.selectedIndex = 1;
  form.type2.onchange();
  form.model2.selectedIndex = 1;
}
</script>

The setTimeout()s are needed as a workaround for IE.

Click [ here ] to see the demo page.

[ Loading Sub-list Content On-the-fly ] [ Back to main page ]

# # #