Java Script to Get Selected Item from Drop-down Select List
By Stephen Bucaro
An HTML Select list is a form control used to create a drop-down list of items
from which the user can select. Each item in a select list is defined by an option
element. The most basic code for a select list is shown below.
<form>
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
</form>
When the user selects one of the items in a select list, an onchange
event is triggered. The selectedIndex property will then contain the
index of the item that the user selected. Select list option indexes start with
0 for the first item. The code below shows one way to access the index of the
item that the user selected.
<script>
function grabSelection()
{
alert(document.myForm.mySelect.selectedIndex);
}
</script>
<form name="myForm">
<select name="mySelect" onchange="grabSelection()">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
</form>
Setting the Default Selected Item
You can set a default selected item by using the default attribute in
one of the option elements as shown below.
<script language="JavaScript">
function getForm(form)
{
alert(form.mySelect.options[form.mySelect.selectedIndex].value);
}
</script>
<form name="myForm">
<select name="mySelect">
<option value="Bread">Bread</option>
<option value="Coffee">Coffee</option>
<option value="Salad" selected>Salad</option>
<option value="Soup">Soup</option>
</select>
<input type="button" value="Get Selection" onclick="getForm(this.form)">
</form>
A select list is a form control, and there may be other controls in the
form. In that case, you use a form button to pass the entire form. Note in
the code above that I used the button's onclick event to execute the
getForm function.
More Java Script Code: • How Far Did the User Scroll? • HTML5 and Local Storage • How to Use HTML5 canvas arc and arcTo Functions • Java Script Code for Directory File List • Easy Slide Show Code with Mouseover Pause • Prevent Automated Form Submissions With Java Script • Java Script Code to Calculate Speed / Distance of Falling Object • JavaScript Code for Binary to Hexadecimal - Hexadecimal to Binary Conversion • Calendars for Your Website • Where Did the User Click?
|