JavaScript Kit > JavaScript Reference > Here

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

Related Tutorials

• Creating a drop down navigational box
• Creating a drop down navigational box II

Events

Properties

Methods

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 Object

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

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"