It’s always a good idea to keep a reference for the basics of handling various form elements. Here is my attempt to explain some of the general functions for dealing with drop-down lists in pure JavaScript.
Note that I am talking about a simple single-selection drop-down list. The syntax for multiple-selection drop down lists is similar, but you will need to handle the selection of several options rather than just one.
The HTML for the Example Drop-Down List
For starters, here is an example of a drop down list that we will be manipulating. It is filled with four options containing numeric values and displaying descriptive text as option 1…option 4
<select id="mySelectList"> <option value="1">option 1</option> <option value="2" selected="selected">option 2</option> <option value="3">option 3</option> </select>
Getting a Reference to the Drop-Down Object
You can reference the object just like any other object in a Web form using document.getElementById( In our case, here is how you would store a reference to the drop-down in a variable:
var selList = document.getElementById('mySelectList');
Reading the Selected Option Index of the Drop-Down
For starters, you can find out numerically what option sequence in the drop-down has been selected and assign it to a variable as:
var mySelectedIndex = selList.options.selectedIndex; // output=1
As you can see, since our drop-down list has a pre-selected value, the selectedIndex gives the position of the selection considering the options as a zero-based array. In the case of our example, since the second option is pre-selected, the output is 1.
Naturally getting the selected index works not just with pre-selected values, but also with user selected values.
Reading the Selected Option Text of the Drop-Down
Now, let’s get the actual text of the selected option that is shown to the user in the drop-down:
var mySelectedText = selList.options[selList.options.selectedIndex].text; // output=option 2
In this case the output will be the text option 2 of the pre-selected list option.
Reading the Selected Option Value of the Drop-Down
Each option in our example drop-down has an assigned value. The user does not see this values, but we can use it as a way to tell what option the user picked, and what option value to send to our database.
var mySelectedValue = selList.options[selList.options.selectedIndex].value; // output=2
In our example, the value of the pre-selected option is 2.
Programmatically Changing the Selected Option
Other than reading values from a drop-down list on your Web page form, you can also set the selected option programmatically from your JavaScript code.
So, for example, to set option number 3 as the selected item, we would write:
selList.options.selectedIndex = 2
Note that we are addressing the selectedIndex to set as a zero-based array of options.
Looping Through the Options to Change the Selected Option
Most of the time you will not know the array position of the option that you want to select, and first will need to check the unique text or value in the options of the drop-down to find the option that you do want to set. You can do this using a for loop in which you read in the value or text of each option and make a decision based on each.
In this example below, we loop through the select list, get each option’s text and value, and select an option by its text. Specifically, we select the option that contains the text option 4.
for (var i = 0; i < selList.options.length; i++) {
var tmpOptionText = selList.options[i].text;
var tmpOptionValue = selList.options[i].value;
if(tmpOptionText == 'option 4') selList.selectedIndex = i;
}
Conclusion
To sum things up, these are the basics of how to read and manipulate a single-selection select list on a Web page. If you have any tips that I may have missed, please leave a comment in the comments section below.
Justin Cooney 