Logic, but in a different way

Daft Logic

Programmatically Preselect Dropdown Using Javascript

Last Updated 20th August 2008

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

Previous Comments For This Page

simply superb...........
By Ravi Boni on 16/01/2012
Very good and still mega-useful thanks
By Rob O on 30/11/2011
Thanks! This helped me out!
By James Newton on 18/11/2011
Thanks...its usefull..
By k2k on 19/10/2011
very nice examples.. easily understandable.Thanks!!!
By Ray on 12/09/2011
Thank you so much .. I had been looking for a straightforward function to post-select a dropdown selection. Other sites had much more complicated routines that did not even work. So I owe you a big hug for your helpful site.
By Barb on 25/08/2011
very useful post
By emmanuel on 19/08/2011
very good,.........
By koushik on 28/04/2011
Great help
On 21/04/2011
thanks
On 18/02/2011
Hi Imad, s is the select object itself. This is what document.getElementById('SELECTID') gets.
By Daft Logic on 16/08/2010
can you please tell what is s in function setSelectedIndex(s, valsearch)
By Imad on 13/08/2010
Richa, not too sure.
By Daft Logic on 22/06/2010
Do you know if there is any way to acheive it in vb Script?
By Richa on 22/06/2010
Excellent. Really superb. I was looking for some kind of solution for this issue. This is really nice. Thank you
By Srikanth , India on 25/03/2010
Very nice explanation... Thanks...
By Gaurang on 01/01/2010
Excellent!! Very nice documented, It works in one shot for Set Dropdown list values. Thanks! M R Javeed
By Md Rasool Javeed on 05/10/2009
Useful and helpful examples. Thanks!
By androids on 03/10/2009
Way to show the exampla through stepwise is Exellent...Tx Note: Pls if possible then create a link and show demo for each example,so it will better bcoz we see actual result. By Amit on 2009-05-04
By amit.btext@gmail.com on 04/05/2009
Very nice examples. Thanks!
By Ernst on 08/04/2009
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

Add your own comment below and let others know what you think:

Comments :

Your Name (optional) :