Dynamic options

You cannot create or delete options in Opera 5.02- on Windows, Explorer 5 on Solaris, Omniweb and QNX Voyager

This script works only vaguely in WebTV. Choosing an option is difficult and sometimes the second box doesn't change content.

Explorer 5.0 Windows has quite a few problems. See below.

Solution: put the script that sets the option in the same frame as the select box.

Setting the options from a popup window may mercilessly crash Explorer Windows.

On this page I explain the basics of generating options in a select box and give a script for dynamic options: when the user selects something from one option box another is automatically filled with new data.

First of all some basics on how to create and delete options from a select box, after which it's time for the important topic of object detection. Then it's time for the example, the script and its explanation.

The basics

This is an option box:

<form name="testform">
<select name="testselect">
	<option value="first">first option</option>
	<option value="second">second option</option>
	<option value="third">third option</option>
	<option>your browser can't handle this script</option>
</select>
</form>

To access options in a select box, you use the following code:

document.forms['testform'].testselect.options[i]

where i is the number of the option you want to access. Remember that the first option is options[0], the second one is options[1] etc.

Now if you want to delete the option, do

document.forms['testform'].testselect.options[i] = null;

By making it null, the option is completely removed from the list. Note that this also affects the numbering of the options. Suppose you remove option[1] from the example above, the old option[2] ('Third option') becomes option[1] etc.

To create a new option, do:

document.forms['testform'].testselect.options[i] = new Option('new text','new value');

where new text is the text the user sees and new value is the VALUE of the new option, the bit that's sent to the server when the form is submitted. Of course the new option overwrites the old one.

To completely clear a select box, do

document.forms['testform'].testselect.options.length = 0;

Object detection

<OPTION>Your browser can't handle this script</OPTION>

As to this cryptic option in the example above, it is for object detection.

One big problem is that you cannot create or delete options in some browsers. Therefore we have to do some object detection to find out if the browser can handle everything.

This is more difficult than usual because the option object itself is supported by all browsers. What we want to know here is if we can add or remove option objects. The trick is to put one extra option in one select box. A script called onLoad tries to remove this option. If, after that, the option's still there the browser has failed its support detect.

This script performs the detect and gives a variable optionTest. If it's false the browser can't handle dynamic options and you should not execute the scripts.

function init()
{
	optionTest = true;
	lgth = document.forms['testform'].testselect.options.length - 1;
	document.forms['testform'].testselect.options[lgth] = null;
	if (document.forms['testform'].testselect.options[lgth]) optionTest = false;
}

<BODY onLoad="init()">

If you select the place of the test option wisely, the text Your browser can't handle this script informs people with old browsers that they can't use this select box script, while users with modern browsers never see the option since it's removed quickly.
You can also place one &nbsp; in the option if you don't want any text.

Example

Try the example below. The options in the second box are links.


One of the strange things I discovered is that the target select box (the second one) must have a SIZE of more than 1, or else Netscape and Explorer each develop their own bugs.

The script

var store = new Array();

store[0] = new Array(
	'HTML Compendium',
	'http://www.htmlcompendium.org',
	'Web Designer\'s Forum',
	'http://www.wdf.net');

store[1] = new Array(
	'Web Designer\'s Forum',
	'http://www.wdf.net',
	'CSS1 Mastergrid',
	'http://webreview.com/wr/pub/guides/style/mastergrid.html');

store[2] = new Array(
	'Stefan Koch\'s JavaScript Tutorial',
	'http://rummelplatz.uni-mannheim.de/~skoch/js/tutorial.htm',
	'Client Side JavaScript Reference',
	'http://developer.netscape.com/docs/manuals/js/client/jsref/index.htm',
	'Web Designer\'s Forum',
	'http://www.wdf.net');


function init()
{
	optionTest = true;
	lgth = document.forms[0].second.options.length - 1;
	document.forms[0].second.options[lgth] = null;
	if (document.forms[0].second.options[lgth]) optionTest = false;
}


function populate()
{
	if (!optionTest) return;
	var box = document.forms[0].first;
	var number = box.options[box.selectedIndex].value;
	if (!number) return;
	var list = store[number];
	var box2 = document.forms[0].second;
	box2.options.length = 0;
	for(i=0;i<list.length;i+=2)
	{
		box2.options[i/2] = new Option(list[i],list[i+1]);
	}
}

init() is called onLoad, as explained above.

This select box triggers the changing of the other one:

<select size=4 name="first" width=200 onchange="populate()">
	<option value="0">html</option>
	<option value="1">css</option>
	<option value="2">javascript</option>
</select>

Explanation

First of all, create some arrays that hold the options. Options are stored in name/value pairs.

var store = new Array();

store[0] = new Array(
	'HTML Compendium','http://www.htmlcompendium.org',
etc.

Please note that the number of the array corresponds with the value of the option: HTML has value 0 and if it's selected it writes store[0] into the second select box.

Then for the actual script. First check if optionTest is false, if so the script is not executed.

function populate()
{
	if (!optionTest) return;

Get the value of the selected option. This should be a number.

For more information about reading out a select box, see the Introduction to forms.

	var box = document.forms[0].first;
	var number = box.options[box.selectedIndex].value;

If for some reason it doesn't exist, end the function. This gives you the freedom to put empty options in the select boxes (like -- Select a category --).

	if (!number) return;

Get the correct option list store[number] and put it in list[]. Then access the second select box.

	var list = store[number];
	var box2 = document.forms[0].second;

Clear the second select box.

	box2.options.length = 0;

Finally, go through the correct list of name/value pairs and make each of them a new option in the second select box.

	for(i=0;i<list.length;i+=2)
	{
		box2.options[i/2] = new Option(list[i],list[i+1]);
	}
}

That's it. I use a simple select box navigation script to make the options in the second box links to external sites.

Explorer 5.0 problems

When it comes to dynamically generating options and selects, Explorer 5.0 on Windows has quite a few problems:

  1. Generating options in another frame or window doesn't work. Put the script in the page that contains the select.
  2. Generating selects and options through the 'pure' W3C DOM (ie. with any document.createElement()) crashes Explorer 5.0 . Solved in 5.5
    Generate these selects and options through innerHTML instead.
  3. Generating options from a popup window may crash any Explorer Windows.