Learn Advanced JavaScript Programming

Table of Contents

The setDefault() function works with any type of select object, whether it is a multiple one or not. It simply loops through the options of the select object and sets the selected property of each to its defaultSelected property, reverting all options to their default selection state. The value handed to the function is the select object, referenced as this.form.myMenu. Figure 22-14 displays the select object when the page loads or after clicking the button to reset it.

Note: Microsoft Internet Explorer does not fully support the select object. The entire discussion is based on Navigator 3.0 because it simply does not work for Microsoft’s browser. As you can see, Microsoft has focused on the user interface of its browser but did not pay much attention to script-level access via JavaScript. The average Web surfer does not feel the disadvantages because Web content providers use only features that are supported by both browsers.

text

There is no HTML attribute that defines the option’s label. Take a look at Example 22-11. The strings “First option,” “Second option,” and so forth are not specified in any HTML attribute as you could expect. They are simply appended to the <OPTION> definitions.

The text property can be set at any time, immediately affecting the display. Example 22-12 demonstrates the use of this property. When the user selects an option from the list, that option is automatically placed at the top of the list, shifting all other options downwards. See the listings for the value property if it is not completely clear.

<HTML>
<HEAD>
<TITLE>Swapping options</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

var choiceIndex = –1

function swap(opt1, opt2) {
  var tempText = opt1.text
  var tempValue = opt1.value
  var tempDefault = opt1.defaultSelected

  opt1.text = opt2.text
  opt1.value = opt2.value
  opt1.defaultSelected = opt2.defaultSelected
 
  opt2.text = tempText
  opt2.value= tempValue
  opt2.defaultSelected = tempDefault
}

function shift(selectName) {
if (choiceIndex == –1) {
choiceIndex = selectName.selectedIndex
swap(selectName.options[choiceIndex], selectName.options[0])
} else {
swap(selectName.options[choiceIndex], selectName.options[0])
choiceIndex = selectName.selectedIndex
swap(selectName.options[choiceIndex], selectName.options[0]
}

selectName.options[0].selected = true
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT onChange="shift(this)">
<OPTION VALUE="val1">First option
<OPTION VALUE="val2" SELECTED>Second option
<OPTION VALUE="val3">Third option
<OPTION VALUE="val4">Fourth option
<OPTION VALUE="val5">Fifth option
</SELECT>
</FORM>
</BODY>
</HTML>

Example 22-12. You can swap options in a select object by swapping their values.

When the user selects an option from the select object, the top option is swapped back to its original position and then the selected option is swapped with the top option that the first swap yielded.

At first, when the page loads and the select object has not been through layout yet, the global variable choiceIndex is initialized to –1. Since the index of an option in a select object is always non-negative, –1 is used to indicate that this is the first execution and that the current state of the select object is its initial one.

The swap() function accepts two options associated with a select object and simply swaps them by swapping their three properties:

text
value
defaultSelected

You cannot directly swap two options because the options array is a read-only one.

The shift() function accepts one argument—a select object. If the value of choiceIndex is –1 then choiceIndex is assigned the index of the selected option, and the selected option is swapped with the option at the top of the list (index is 0). Since choiceIndex is a global variable, its value will stay intact until the next invocation of the shift() function. When the value of choiceIndex is not –1, the function runs a different set of statements. First, it swaps the option at the top of the menu with option number choiceIndex. Since choiceIndex has not been set yet during the current execution of the function, it holds the index of the option that the user selected on the previous round. That is, the function simply returns the select object to the state that preceded the previous function’s execution. The following two statements are identical to those executed when the value of choiceIndex is –1. It is unnecessary to specify these statements twice. Instead, you may conditionally execute the first statement (if choiceIndex is not –1) and then unconditionally execute the other two.

value

The value property initially reflects the VALUE attribute of an <OPTION> definition. You can override the initial setting at any given time by assigning this property a value. We have seen this property in action before. For working examples, see the listings for the defaultSelected property of the select object and the preceding listings for the text property.

The Option Object—Adding Options Using the Option Constructor

JavaScript for Netscape Navigator 3.0 enables you to explicitly create options via the Option constructor. Options you create are instances of the Option object. The syntax for creating an option is as follows:

var optionName=new Option([optionText,optionValue,
    defaultSelected,selected])

Here is a brief explanation of the arguments you should normally hand to the constructor function:

optionText—a string representing the option’s text property.
optionValue—a string representing the option’s value property.
defaultSelected—a string representing the option’s defaultSelected property.
selected—a string representing the option’s selected property.

See the listings for each of these properties for more details. You can add an option to an existing select object in the following fashion:

selectName.options[index] = optionName

After you create an option and add it to a select object you must refresh the document. You can do that via JavaScript using the following statement:

history.go(0)

You can also refresh a document using the browser control options, in two ways:

By clicking in the Location box and pressing Enter.
By selecting Refresh from the View menu.
You can also delete an option from a select object, by assigning it a null value. The general syntax is as follows:
```
selectName.options[index] = null
```
Once again, you must refresh the document via history.go(0) in order to see the updated appearance of the select object.

An option created as an instance of the Option object includes the same properties as an option which is associated with a select object.

Previous Table of Contents Next