JavaScript Kit > JavaScript Reference > Here
Select and Option objects
Form SELECT elements (<select>
) within your form can be accessed and manipulated in 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
document.getElementById("selectid") //where "selectid" is the ID of the SELECT element on the page
Then, the options[]
property of SELECT returns as a HTMLCollection every OPTION, for example:
document.getElementById("myselect").options[0] //accesses first option via options[]
document.getElementById("myselect").options[3] //accesses 4th option via options[]
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. For example:
document.getElementById("myselect").options[0].value //accesses value attribute of 1st option
document.getElementById("myselect").options[3].text //accesses text of 1st option
In summary, there is the select
object in JavaScript to access a SELECT element, select.options[]
property that contains each individual OPTION as a HTMLCollection, and finally, the option
object that represents each OPTION itself in JavaScript.
Related Tutorials
- Creating a drop down navigational box
- Creating a drop down navigational box II
- Changing Select element options on the fly
Select Object
Events
Events | Description |
---|---|
onBlur | Code is fired whenever the focus is removed from the SELECT element. |
onChange |
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:
Demo: Example: <form id="aform"> |
onFocus | Code is fired whenever the focus is set on the SELECT element. |
Properties
Properties | Description |
---|---|
disabled | Boolean value that sets/ returns whether this SELECT element is disabled. |
form | References the form that contains the selection list in question. |
length |
Returns the number of options in the SELECT element:
document.getElementById("mymenu").length //returns number of options |
multiple | Boolean that indicates whether this SELECT allows more than one option to be selected simultaneously. |
name | Reflects the name of the SELECT element (the name attribute). |
options[] | An HTMLCollection of Options objects containing each option within this SELECT element. |
selectedIndex |
An integer that gets or sets 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. 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: Demo:
<script type="text/javascript"> |
size | An integer reflecting the number of OPTIONs being displayed at once within this SELECT element. |
type |
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 ":
<script type="text/javascript"> |
Methods
Methods | Description |
---|---|
add(newoption, beforeoption*)
*Important: |
Dynamically adds a new OPTION to the SELECT element, where:
Due to the differences in the implementation of the 2nd parameter of Example: <form id="someform"> results in the SELECT element becoming: <select id="sample"> Note: An alternate, arguably simpler way of adding a new option to the SELECT element is simply to assign |
remove(optionindex) |
Removes an existing option within SELECT at the specified position, where 0=1st option, 1=2nd option etc, for example:
var myselect=document.getElementById("sample") |
blur() | Removes focus away from the selection list. |
focus() | Sets focus on the selection list. |
Option object
The Option object represents each OPTION within a SELECT element as a JavaScript object.
Properties
Properties | Description |
---|---|
defaultSelected | A Boolean specifying whether this option is initially selected. |
index | Returns the index of this option within the select.options[] property. |
selected |
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):
<script type="text/javascript"> |
text | Specifies the text for the option. |
value | Specifies the value for the option. |
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:
new Option([text], [value], [defaultSelected], [selected])
All parameters are optional:
text
: String that sets the text of the optionvalue
: String that sets the value attribute of the optiondefaultSelected
: Boolean that sets whether this option should be the default selected option (same effect as setting thedefaultSelected
attribute).selected
: Boolean that sets whether this option should be selected (same effect as setting theselected
attribute).
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, just assign new Option()
somewhere within select.options[]
where you want the new option to be added. For example:
var myselect=document.getElementById("sample")
myselect.options[0]=new Option("New 1st option", "who") //replace 1st option with a new one
myselect.options[myselect.length]=new Option("Brand new option", "what") //add a new option to the end of SELECT
Notice how you can both replace an existing option, or add a new one to a SELECT element this way. It serves as an alternate method of adding/removing options to select.add()
and select.remove()
, with the main benefit being it works in all browsers out of the box, including in very old, non DOM2 legacy browsers. See Changing Select element options on the fly for more info.
- JavaScript Operators
- JavaScript Statements
- Global functions
- JavaScript Events
- Escape Sequences
- Reserved Words