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

Comments For This Page

Very Helpful and thanks for also having Demos. Thank you!
By Litsa on 16th May 2017
To whom it may help...
This page pointed me in the right direction... but could not get the text value from dropdown.
I found that I had to use the following format within my WinBatch script:
........).options.item(0).text;

Hope it helps.
On 6th October 2016
Thanks. It's very useful
By jay on 25th September 2016
I have been searching for this 'Post-Render Selection by Value' solution for days! You solved my problem in less than 5 minutes. Thank you!
By Peter N on 4th September 2016
Seems that this makes more logical sense when dealing with Loopkup options. But on my scenario Sharepoint 2013, it does not get all the options. When I fireup the document.ready or _spBodyOnLoadFunctionNames.push, the options of that lookup is not available. Why is this so? And how can I retrieve the options and select one option if not all options are available?
On 2nd August 2016
Thanks this really did wonders.
On 16th April 2016
Hi ricardo, the quick answer is we don't know. how to do this. It sounds like more of a question for a Greasemonkey developer.
By Daft Logic on 15th March 2016
Thanks for these wonderful guide, but can i request a guide for this situation.

Situation:
A visitor of the site wanted to preselect an item on the dropdown upon loading the site and clicking the icon below it.

How can you do that using greasemonkey with jquery, how would you write the script with that.. You program your script to choose this item eg. Small then submit your selection?

Thanks in advance for answering inquery.
By ricardo on 14th March 2016
What about for dynamically created drop down?
On 23rd January 2016
Thank u for your help ...
This code will be the simple that i had found for this ...once again thank you for your support

By sandeep on 13th December 2015
This is vary helpful.
By Sonu Mishra on 4th November 2015
Thanks really really bloody helpful right now!!
By matt on 7th July 2015
nice-------------HyderABAD
On 7th July 2015
I've been trying to do the equivalent of a Post-Render Selection by Value for two days now, after reading this I got it working in five minutes. Many, many thanks.
By Daniel on 30th June 2015
i need the same functionality with value change...i mean when i select item1 from the drop down then it hav to display some other value...
On 25th May 2015
Thanks man !! You did it !! My problem got resolved because of this article .
I was struggling for about 4 hrs on this.

SUPERB !! FANTABULOUS !! FANTASTIC
Many Many Thanks !!!
By Tushar Parekh on 15th April 2015
quick and to the point... thank you
By hockeyhabit on 13th February 2015
nice
By ajay on 11th February 2015
Thanks :) it was helpful!
By Rocky on 18th November 2014
salamat
On 3rd September 2014
how can i set preselected values in a multi select dropdown list using chosen jquery plug in
http://stackoverflow.com/questions/25138009/how-to-set-selected-values-to-a-multi-select-dropdown-list-on-form-load-in-net/25138115?noredirect=1#comment39161078_25138115
On 6th August 2014
s id the drop-down list and v is the value your are trying to find.
By Daft Logic on 22nd April 2014
what is s,v
On 21st April 2014
thank u very much..
By pradeep on 13th July 2013
Very Good
By Issac Newton on 3rd July 2013
Clear, Consise, Helpful... Thanks :-)
By Another Developer on 1st February 2013
Thanks, this worked great and was quick and painless.
On 2nd January 2013
Nice,Clear and Helpful Post
On 20th December 2012
Thank you very much ........
By sachin patil on 14th December 2012
I am trying to use the "Post-Render Selection by Value". My options look like this:



But when I select the item it does not go to the value link. Can you tell me what I'm missing? Thank you.
On 14th October 2012

30 out of 66 comments shown. See all comments.

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

Share This Page

Share this page with others using one of the methods below. Telling others about Daft Logic is good and we appreciate your support!