Select Object
CSGNetwork FREE Source Code, Javascript Source, and Code Snippets!
CSGNetwork Custom Search
     Bookmark and Share
Top Free Apps

Right click this window and select "view source" in order to copy the source for this script.

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 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 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 Description
blur() Removes focus away from the selection list.
focus() Sets focus on the selection list.



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(){

<form name="test">
<select name="test2" onChange="alertselected()">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</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", "", false)

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


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.


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

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"

Bookmark and Share
Registered® Trademark™ and Copyright© 1973 - CSG, Computer Support Group, Inc. and CSGNetwork.Com All Rights Reserved