Beginning JavaScript

The Select Elements

Although they look quite different, drop-down list and list boxes are actually both elements created with the <select> tag, and strictly speaking they are both select elements. The select element has one or more options in a list that you can select from; each of these options is defined using the <option> tag. Your list of <option> tags goes in between the <select> and </select> tags.

The SIZE attribute of the <select> tag is used to specify how many of the options are visible to the user.

For example, to create a list box that is 5 rows deep and populate it with 7 options, our <select> tag would look like this:

Notice that the Monday <option> tag also contains the word SELECTED; this will make this option the default selected one when the page is loaded. The values of the options have been defined as numbers, but text would be equally valid.

If we wanted this to be a drop-down list, then we just need to change the SIZE attribute in the <select> tag to 1 and hey presto it's a drop-down list.

If we want to let the user choose more than one item from a list at once, we simply need add the MULTIPLE attribute to the <select> definition.

The <select> tag creates a Select object. This object has an options[] array property, and this array is made up of Option objects, one for each <option> element inside the <select> element associated with the Select object. For example, in the above example if the <select> element was contained in a form called theForm, with

How can we tell which option has been selected by the user? Easy; we use the Select object's selectedIndex property. We can use the index value returned by this property to access the selected option using the options[] array.

The Option object also has index, text, and value properties. The index property returns the index position of that option in the options[] array. The text property is what's displayed in the list and the value property is the value defined for the option, which would be posted to the server if the form were submitted.

If you want to find out how many options there are in a select element, you can use the length property of either the Select object itself or of its options[] array property.

Let's see how we could loop through the options[] array for the above select box:

First we set the variable theDayElement to reference the Select object. Then we write the number of options to the page, in this case 7.

Next we use a for loop to loop through the options[] array, displaying the text of each option, such as Monday, Tuesday etc., and its value, such as 0, 1 etc. If you create a page based on this code, it must be placed after the <select> tag has been defined.

It's also possible to add options to a select element after the page has finished loading. We'll look at how this is done next.

Adding New Options

When creating a new Option object there are two parameters to pass, the first is the text you want to appear in the list, the second the value to be assigned to the option.

We then simply assign this Option object to an empty array element, for example:

If you want to remove an option you simply set that part of the options[] array to null. For example, to remove the element we just inserted above, we need:

When you remove an Option object from the options[] array, the array is reordered so that the array index values of all the options above the removed one have their index value decremented by one.

When you insert a new option at a certain index position, beware that it will overwrite any Option object that is already there.