Scribd
Upload
77 views7 pages

JavaScript Select Box Events & Properties

This document discusses DOM properties and methods for select elements in HTML forms. It lists select event handlers like onMouseOver and onChange. It also lists DOM properties like length, name, selectedIndex, and text that can be used to get and set select options. Methods like blur() and focus() are described. An example is given to programmatically set the second option as selected on mouse over.

Uploaded by

beautybyst
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
77 views7 pages

JavaScript Select Box Events & Properties

This document discusses DOM properties and methods for select elements in HTML forms. It lists select event handlers like onMouseOver and onChange. It also lists DOM properties like length, name, selectedIndex, and text that can be used to get and set select options. Methods like blur() and focus() are described. An example is given to programmatically set the second option as selected on mouse over.

Uploaded by

beautybyst
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd

Select DOM Properties

Ms. Belle Salazar-Sandagon


Select Events
 onMouseOver onMouseOver is invoked when a mouse is
moved over the Select Box
 onMouseDown onMouseDown is invoked when a mouse is
pressed down on the Select Option
 onMouseUp onMouseUp is invoked when a mouse is pressed
down on the select option and released
 onChange onChange is invoked when a new option is
selected
 onBlur onBlur Executes some code when the SelectBox loses
focus using tab
 onFocus onFocus Executes some code when the SelectBox
gets the focus using tab
Select 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>
Select DOM Property ,
Description & Example
 length Used to get the length (total number of options) in
the select object
 Ex .To Get the length:
var len = document.tests.sel.length;

 name Used to get Select Box name


 Ex To Get name:
var ss = document.tests.sel.name;


Select DOM Property ,
Description & Example
 selectedIndex selectedIndex is used to get or set the
position of the option selected
 Ex. To Get:
var ss = document.tests.sel.selectedIndex;
Returns 1 if the second option is the selected one.
To Set SelectedIndex:
document.tests.sel.selectedIndex = 0;

 text Returns the text value present in the select box


 Ex To Get text :
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 element blur
 To Blur:
document.testb.mycb.blur();

 focus() Used to dynamically get focus on the element 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>
<form name=xx>
<select name=sbox onMouseOver="sevent()">
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
</select>
</form>

You might also like