Programmatically Preselect Dropdown Using Javascript

This page describes how to set the selected item on an HTML dropdown list after the page has been rendered using javascript.

Basics

A dropdown list can contain a range of items. For the purposes of this example we will use...

item1 item2 item3 item4 item5 item6

The HTML of which is as follows...

<select name="ddl_example1">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>

As you can see, the initially selected item is the first item on the list.

Pre-Render Selection

In order to pre-select an item on the drop down list you can do so prior to the page being rendered by adding a selected="selected" attribute inside the required option. So if we wish to pre-select item 3 for the above example, we can use...

<select name="ddl_example2">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3" selected="selected" >item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>

Which will give..

item1 item2 item3 item4 item5 item6

Post-Render Selection by Index

From time-to time it may be the case that the item required for pre-selection is not known until an event occurs on the page after the page has been rendered. If this is required then it is not possible to add the selected="selected" attribute.

There is a method that uses javascipt to manipulate the DOM in order to select a particuar option in the list.

So, to post-select item 5 the following code can be used...

<select id="ddl_example3" name="ddl_example3">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>

<script>
function setSelectedIndex(s, i)
{
s.options[i-1].selected = true;
return;
}
setSelectedIndex(document.getElementById("ddl_example3"),5);
</script>

Which will give item1 item2 item3 item4 item5 item6

Post-Render Selection by Name

You can also post-select an item by name, so to post-select item 4 the following code can be used...

<select id="ddl_example4" name="ddl_example4">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>

<script>
function setSelectedIndex(s, v) {
for ( var i = 0; i < s.options.length; i++ ) {
if ( s.options[i].text == v ) {
s.options[i].selected = true;
return;
}
}
}
setSelectedIndex(document.getElementById('ddl_example4'),"item4");
</script>

Which will give item1 item2 item3 item4 item5 item6

Post-Render Selection by Value

Post-select an item by the value of the value attribute

<select id="ddl_example5" name="ddl_example5">
<option value="AA">item1</option>
<option value="BB">item2</option>
<option value="CC">item3</option>
<option value="DD">item4</option>
<option value="EE">item5</option>
<option value="FF">item6</option>
</select>
<script>
function setSelectedIndex(s, valsearch)
{
// Loop through all the items in drop down list
for (i = 0; i< s.options.length; i++)
{
if (s.options[i].value == valsearch)
{
// Item is found. Set its property and exit
s.options[i].selected = true;
break;
}
}
return;
}
setSelectedIndex(document.getElementById("ddl_example5"),"BB");
</script>

Which will give item1 item2 item3 item4 item5 item6

Previous Comments For This Page

stan, I have added a 5th example Post-Render Selection by Value to show this.
By Daft Logic on 15/11/2008 Would like to preselect the value by a 2 letter country code e.g. <option value="US">United States</option>
By stan on 14/11/2008