11.12.2012 Views

JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Trainer<br />

Friend<br />

Cook<br />

An HTMLSelectElement has the properties and methods common to other form fields (name,<br />

disabled, size, tabIndex, form, focus(), and blur()) as well as the additional properties and<br />

methods shown in Table 14-10. A few of these require some discussion. First is multiple, the<br />

presence of which indicates the menu to be a multiple-select menu. <strong>The</strong> size attribute is used<br />

to indicate the number of choices that are shown in the field; by default, the value for this<br />

attribute is 1.<br />

Table 14-10: Additional Properties and Methods of an HTMLSelectElement Object<br />

Property Description<br />

length Number of s this element contains (the length of the<br />

options[] collection).<br />

multiple Boolean indicating whether the user can select more than one of the<br />

options.<br />

SelectedIndex Index of the currently selected option in the options[] collection. If<br />

multiple is true, only the first selected choice will be held in this<br />

property.<br />

Size Number of options visible at once (1 for a pull-down, more than 1 for<br />

scrolled list).<br />

options[] Collection of Options contained by the .<br />

value String holding the value attribute of the currently selected option. If<br />

multiple is true, only the value of the first selected option is present.<br />

add(element,<br />

before)<br />

Inserts the new Option element before the Option before.<br />

remove(index) Deletes the Option at position index in the options[] collection.<br />

Note <strong>The</strong> value property of the Select object is not widely supported in old browsers. Avoid<br />

using it for this reason. Instead, use the selectedIndex in conjunction with the options[]<br />

collection to extract the selected value manually.<br />

Many of the similar event handlers like onfocus are available for the object, but the most useful<br />

event handler for is onchange, which is fired whenever the user selects a different<br />

option in the menu.<br />

<strong>The</strong> key to scripting a select menu, be it a single- or multiple-choice menu, is an awareness of<br />

how to examine the options[] collection for the currently selected value. Given a single-choice<br />

menu, the currently selected option is held in the selectedIndex property and is easily

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!