15.9.7 Select and Option Elements
The Select element represents a set of options (represented by Option elements) from which the user can select. Browsers typically render Select elements in drop-down menus, but if you specify a size attribute with a value greater than 1, they will display the options in a (possibly scrollable) list instead. The Select element can operate in two very distinct ways, and the value of the type property depends on how it is configured. If theelement has the multiple attribute, the user is allowed to select multiple options, and the type property of the Select object is “select-multiple”. Otherwise, if the multiple attribute is not present, only a single item can be selected, and the type property is “select-one”.
In some ways, a select-multiple element is like a set of checkbox elements, and a select-one element is like a set of radio elements. The options displayed by a Select element are not toggle buttons, however: they are defined byelements instead. A Select
15.9 HTML Forms | 403
element defines an options property which is an array-like object that contains Option elements.
When the user selects or deselects an option, the Select element triggers its onchange event handler. For select-one Select elements, the read/write selectedIndex property specifies which one of the options is currently selected. For select-multiple elements, the single selectedIndex property is not sufficient to represent the complete set of selected options. In this case, to determine which options are selected, you must loop through the elements of the options array and check the value of the selected property for each Option object.
In addition to its selected property, each Option object has a text property that specifies the string of plain text that appears in the Select element for that option. You can set this property to change the text that is displayed to the user. The value property is also a read/write string that specifies the text to be sent to the web server when the form is submitted. Even if you are writing a pure client-side program and your form never gets submitted, the value property (or its corresponding HTML value attribute) can be a useful place to store any data that you’ll need if the user selects a particular option. Note that Option elements do not have form-related event handlers: use the onchange handler of the containing Select element instead.
In addition to setting the text property of Option objects, you can dynamically change the options displayed in a Select element using special features of the options property that date to the early days of client-side scripting. You can truncate the array of Option elements by setting options.length to the desired number of options, and you can remove all Option objects by setting options.lengthto 0. You can remove an individual Option object from the Select element by setting its spot in the options array to null. This deletes the Option object, and any higher elements in the options array automatically get moved down to fill the empty spot.
To add new options to a Select element, create an Option object with the Option() constructor and append it to the options property with code like this: // Create a new Option object var zaire = new Option("Zaire", // The text property "zaire", // The value property false, // The defaultSelected property false); // The selected property
// Display it in a Select element by appending it to the options array:
var countries = document.address.country; // Get the Select object
countries.options[countries.options.length] = zaire;
Keep in mind that these special-purpose Select element APIs are very old. You can more clearly insert and remove option elements with standard calls to Document.createElement(), Node.insertBefore(), Node.removeChild(), and so on.欢迎转载,转载请注明来自一手册:http://yishouce.com/book/1/31437.html