|
|
|
optionsYou can reference the options in a select object by the options object. Generally speaking, this array contains an entry for each option (<OPTION>) in a select object (<SELECT>). Suppose the first element of the first form in a document is a select object with three options. These options can be referenced in JavaScript as:
document.forms[0].elements[0].options[0] document.forms[0].elements[0].options[1] document.forms[0].elements[0].options[2]
As always, the length of the array, which is equal to the number of options in the given select object, is stored in the array’s length property. In the preceding examples that would be:
document.forms[0].elements[0].options.length
Elements of the options array are read-only. Although it does not generate a JavaScript error, assigning a value to any of the elements has no effect. The bare-bones selectObject.options reference evaluates to the full HTML syntax used to create the specified selectObject. Note that you can also access the properties of the select object as if they were direct properties of the options array. selectedIndexThe selectedIndex property is an integer specifying the index of the selected option in a select object. Options in a select object are indexed in the order of definition, i.e., in the same order they are entered in the options array. You can also set the value of selectedIndex in a script to immediately update the state (the selected option) of a select object. The selectedIndex property is not useful with MULTIPLE select object because it can only refer to the first selected option in the list. You can work around this problem by using the selected property of the options array and a simple loop. See the listings for this property for further details. Example 22-9 demonstrates the selectedIndex property. Although we have not discussed the value property yet, its role is obvious. If needed, refer to its description later in this chapter.
<HTML>
<HEAD>
<TITLE>URL option</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function loadPage(list) {
location.href = list.options[list.selectedIndex].value
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT onChange="loadPage(this)">
<OPTION VALUE="http://www.cnn.com/">CNN
<OPTION VALUE="http://www.msnbc.com/">MSNBC
<OPTION VALUE="http://www.usatoday.com/">USA TODAY
</SELECT>
</FORM>
</BODY>
</HTML>
Example 22-9. A URL picker. When the user selects an option in the select object, the loadPage() function is invoked by the onChange event handler, passing the select object as an argument. The URL associated with each option is stored as the option’s VALUE attribute, or value property in terms of JavaScript. The selected option is list.options[list.selectedIndex] because list.selectedIndex is an integer representing the index of the selected option. The value property is used to access the URL of the selected object, which is then assigned to location.href, in order to load that page to the browser window. You may prefer to use a button in place of the onChange event handler:
<HTML>
<HEAD>
<TITLE>URL option with button</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function loadPage(list) {
location.href = list.options[list.selectedIndex].value
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT>
<OPTION VALUE="http://www.cnn.com/">CNN
<OPTION VALUE="http://www.msnbc.com/">MSNBC
<OPTION VALUE="http://www.usatoday.com/">USA TODAY
</SELECT>
<INPUT TYPE="button" VALUE="load page"
onClick="loadPage(this.form.elements[0])">
</FORM>
</BODY>
</HTML>
Example 22-10. Another version of the URL picker—this one uses a button. The only difference between Example 22-10 and Example 22-9 is that in Example 22-10 the event handler is attached to a button object, while in Example 22-9 it is attached to a select object. In order to avoid changing the function, we have modified the argument handed to the function to keep passing the select object. The expression this.form references the form and elements[0] references the select object which is the first element in the form. Properties (options array)An element in the options array reflects a select object’s option defined by the <OPTION> tag in HTML. Properties of the options array are properties of specific options in a select object. defaultSelectedThe defaultSelected property evaluates to a Boolean value. If the specified option is defined with a SELECTED attribute (<OPTION … SELECTED>), the value of defaultSelected is true. Otherwise, it is false. DefaultSelected initially reflects whether the SELECTED attribute is used within an <OPTION> tag. Setting the defaultSelected property via a script overrides the initial HTML setting. In a select object without a MULTIPLE specification you can only have one option selected by default. Therefore, setting the defaultSelected property of a given option to true clears any previous default selections, including those set with SELECTED. Nevertheless, if you set defaultSelected in a select object defined with the MULTIPLE attribute, previous default selections are not cleared. indexThe index property of a single option in a select object is the number identifying the position of the object in the selection list, starting from zero. Under normal circumstances, there is no justification for the existence of the index property, because in order to reference an option, you need to know its index:
document.selectObject.options[indexValue]
and when you reference the index property, you supposedly know the index already:
document.selectObject.options[indexValue].index
lengthSee the listings for this property in the preceding section—“Properties (select object).” selectedThe selected property is a Boolean value specifying the current selection state of an option in a select object. Its general syntax is as follows:
selectName.options[index].selected
If an option in a select object (selectName.options[index]) is selected, the selected property evaluates to true. Otherwise, it evaluates to false. You can set this property at any time, affecting immediately the display of the select object. The selected and defaultSelected properties are very useful. Suppose you want to create a button by which the user can reset the select object. Using the reset button is not desirable because it resets the entire form, not just the select object. You can solve the problem by using a simple JavaScript function to revert the select object to its default state. Here is the function that the button should invoke:
<HTML>
<HEAD>
<TITLE>Reset select object</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function setDefault(selectName) {
for (var i = 0; i < selectName.options.length; ++i) {
selectName.options[i].selected = selectName
.options[i].defaultSelected
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="myMenu" MULTIPLE>
<OPTION> First option
<OPTION SELECTED> Second option
<OPTION> Third option
<OPTION> Fourth option
<OPTION SELECTED> Fifth option
</SELECT>
<INPUT TYPE="button" VALUE="reset menu"
onClick="setDefault(this.form.myMenu)">
</FORM>
</BODY>
</HTML>
Example 22-11. A simple function resets a select object. |
|||||||||||||||||||
|
With any suggestions or questions please feel free to contact us | |||||||||||||||||||||
){kind=link}