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

Or with jQuery:
$("#mydropdownlist").val("thevalue");
By Linus Torvalds on 31st July 2019
thank You very Helpful!
By Sarah on 25th July 2019
This was great, thank you so much!
On 16th May 2019
This has been helpful, I am trying to use this on my site where the user makes a selection and then clicks submit. Its a post call and I want the page to display the value they submitted instead of the first option in the list.
By MattN on 9th May 2019
Thank you very much. This is very helpful.
By Doug on 30th March 2019
I got this to select my dropdown item, however, the page doesn't update according to what's selected. If I select the item manually, other elements in the page change and react to the selection. Via JS, only the dropdown is filled, but nothing else responds to that.. is there a workaround for that? Thanks!
On 4th March 2019
hola
On 6th January 2019
ok
By bill on 23rd October 2018
It actually works. Thanks
On 13th September 2018
Ohhh thank's so much for this ....
By Rahul on 22nd June 2018
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

30 out of 76 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!