|
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.
textThere 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:
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. valueThe 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 ConstructorJavaScript 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:
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:
|
||||||||||||||||||||
With any suggestions or questions please feel free to contact us |