To access a SELECT element in JavaScript, use the syntax:. Then, the options[] property of SELECT returns as a HTMLCollection every OPTION, for example:. Finally, each individual OPTION within SELECT is represented in JavaScript as a corresponding option object. This gives you access to an OPTION's actual value or text, among other things.

In summary, there is the select object in JavaScript to access a SELECT element, select.

If non is selected, -1 is returned. If multiple options are selected, it returns the index of the first selected option. When setting this property, the OPTION at the given position will be selected while any previously selected option deselected. The following example alerts the index number of the selected option within a SELECT element when the user makes a selection:.

SCR Using an onchange event on a select element without causing a change of context | Techniques for WCAG

Dynamically adds a new OPTION to the SELECT element, where: The new option to add, created using new Option. This parameter differs depending on the browser used: In non IE browsersan existing option reference within SELECT in which to add the new option following it.

If null is entered, the new option is added at the very end. In IE browsers including IE8 beta2an integer representing the position of the existing option to add the new option to ie: Leave this parameter out entirely to add the new option to the very end.

The 1st parameter newoption should simply be a new option created using new Option see Option object below for more info.

An alternate, arguably simpler way of adding a new option to the SELECT element is simply to assign new Option to one of the options within select. See Option object below for more info. Option object The Option object represents each OPTION within a SELECT element as a JavaScript object. The Option object allows you to add new options to your selection list using JavaScript.

To dynamically create a new option, call its constructor function:. While all paramters are optional, typically you'll want to define at least the first two parameter when calling new Option. To add a new option to an existing SELECT element, javascript select option value onchange assign new Option somewhere within select.

Notice how you can both replace an existing option, or add a new yum brands stock market to a SELECT element this way. See Changing Select element options on the fly for more info.

CopyRight c JavaScript Kit. NO PART may be reproduced without author's permission. JS Reference DOM Reference IE Filters Reference CSS Reference. DHTML Menus Free Domain Name. Code is fired whenever an OPTION within SELECT changes, through the user selecting another option.

This event handler is commonly used to create a SELECT element that reacts as soon as the user has selected an option manually.

Here's a SELECT menu that navigates to a particular site upon user selection: Returns the number of options in the SELECT element: Boolean that indicates whether this SELECT allows more than one option to be selected simultaneously. An HTMLCollection of Options objects containing each option within this SELECT element.

HTML Test Suite for UAAG (Draft)

An integer that gets or sets the index of the selected option. The following example alerts the index number of the selected option within a SELECT element when the user makes a selection: An integer reflecting the number of OPTIONs being displayed at once within this SELECT element.

A property available on all form elements, "type" returns the type of the calling form element.

For SELECT, the two possible values are " select-one " or " select-multiple ", depending on the type of selection list. The below code gives all SELECT elements in a particular form a CSS class of " selectclass ": Returns the index of this option within the select. Boolean that specifies whether this option is currently selected. The following looks through all OPTIONs within a SELECT to see which one is selected assumes only 1 can be selected at any time: