Select option Object :
The following syntax will get the Select object in javascript Syntax: document.formname.selectname
Example Code:
<form name=testform>
<select name=sel>
<option value=test> test select option </option>
</select>
</form>
<script language="javascript">
var cbobject= document.testform.rb1;
</script>
Here are the events, dom properties and method associated with
Select Box element.
Event Handlers: Associated with Form type SelectBox:
All the examples below use a javascript function output
<script language=javascript>
function output()
{
alert("testing Select Option events");
}
</script>
Event Handler
Description
Example
onMouseOver
onMouseOver is invoked when
a mouse is moved over the Select Box
Result:
onMouseDown
onMouseDown is invoked when
a mouse is pressed down on the Select Option
Result:
onMouseUp
onMouseUp is invoked when
a mouse is pressed down on the select option and released
Result:
onChange
onChange is invoked when
a new option is selected
Result:
onBlur
onBlur Executes some code when the SelectBox loses focus using tab
Result:
onFocus
onFocus Executes some code when the SelectBox gets the focus using tab
Result:
DOM Properties:
The following are the list of DOM (Dynamic Object Model) properties
that can be used to get and alter Select properties in javascript.
The below examples are based on the form
<form name=tests>
<select name=sel>
<option value=test> test select option </option>
<option value=test2> test2</option>
</select>
</form>
DOM Property
Description
Example
length
Used to get the length (total number of options)
in the select object
To Get:
var len = document.tests.sel.length;
name
Used to get Select Box name
To Get:
var ss = document.tests.sel.name;
options
Returns the array of options listed in the select object
To Get:
var ss = document.tests.sel.options;
selectedindex
selectedindex is used to get or set the position
of the option selected
To Get:
var ss = document.tests.sel.selectedindex;
Returns 1 if the second option is the selected one.
To Set:
document.tests.sel.selectedindex = 0;
text
Returns the text value present in the select box
To Get:
var dd = document.tests.sel.selectedIndex;
var ss = document.tests.sel[dd].text;
DOM Methods:
The following are the list of DOM (Dynamic Object Model) methods
that can be used to do dynamic changes in select option using javascript.
DOM Method
Description
Example
blur()
Used to dynamically make the Radio Button blur
To Blur:
document.testb.mycb.blur();
focus()
Used to dynamically get focus on the Radio Button
To Focus:
document.testb.mycb.focus();
Example: Making the second option as selected when ever you move the mouse over it.
<script language=javascript>
function sevent()
{
var xx = document.xx.sbox;
document.xx.sbox.selectedIndex = 1;
}
</script>
Javascript (JS) is one of the most used languages in the world. Some times spelled as Java Script.
Hope you enjoy this tutorial. Do send your feedback or suggestions on this javascript or java script tutorial. This is a copyright content.
Introduction
