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...

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..

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

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

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