Select Object

Form Select elements (<select>) within your form can be accessed and manipulated using JavaScript via the corresponding Select object. To access a select element in JavaScript, use the syntax:

document.myform.selectname //where myform and selectname are names of your form/element.
document.myform.elements[i] //where i is the position of the select element within form

Events

Events	Description
onBlur	Code is executed when the focus is removed from the selection list.
onChange	Code is executed when the option within menu changes, through the user selecting another option.
onFocus	Code is executed when the focus is set on the selection list.

Properties

Properties	Description
disabled	Boolean value that sets/ returns whether the select menu is disabled.
form	References the form that contains the selection list in question.
length	Reflects the number of options in the selection list.
name	Reflects the name of the selection list (the name attribute).
options	An array of Options objects, for each option within the selection list.
selectedIndex	An integer reflecting the index of the selected option. If non is selected, -1 is returned. If multiple options are selected, it returns the index of the first selected option. Example(s)
type	A property available on all form elements, "type" returns the type of the calling form element. For selection lists, the two possible values are "select-one" or "select-multiple", depending on the type of selection list.

Methods

Methods	Description
blur()	Removes focus away from the selection list.
focus()	Sets focus on the selection list.

Examples

selectedIndex

This example alerts the index number of the selected option when the user makes a selection:

<script type="text/javascript">
//Function alerts the index of the selected option within form
function alertselected(){
alert(document.test.test2.selectedIndex)
}
</script>

<form name="test">
<select name="test2" onChange="alertselected()">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</form>

---

Option

The Option object allows you to dynamically create options for your selection list using JavaScript, or manipulate existing options through its properties. To dynamically create a new option, use the syntax:

new Option(text, value, defaultSelected, selected)

1) Text- Optional string that specifies the text of the option.
2) Value- Optional string that specifies the value of the option
3) defaultSelected- Optional Boolean that specifies that this option should be selected by default.
4) selected- Optional Boolean that specifies whether this option is selected.

When you create a new option, you can add it to the selection list by adding it to the array "select.options", such as:

document.testform.thecountry[4]=new Option("Canada", "http://canada.com", false)

Option also supports numerous properties for the manipulation of existing options:

Properties

Properties	Description
defaultSelected	A Boolean specifying whether this option is initially selected.
index	Returns the index of the option within the select.options[] array.
selected	Boolean that specifies whether this option is currently selected.
text	Specifies the text for the option.
value	Specifies the value for the option.

Examples

<form name="test">
<select name="test2">
<option selected>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</form>

Using above form as basis:

document.test.test2.options[0].selected //returns true, since first option is selected
document.test.test2.options[2].text //returns "Option 3"