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

Good day I have been working on a validation project I need to validate the gender select option value when you enter ID number in an input field javascript
By Gerald on 29th March 2023

Credit where credit is due. Thanks for this. Really saved me a lot of time!
By Alex on 1st August 2021

Nice article, thanks for sharing! I have build a javascript dropdown plugin, check it out: https://jsuites.net/v3/dropdown-and-autocomplete
By JoÃ£o Pedro on 6th January 2021

I was looking for programmatically selecting/prioritizing the options in a dropdown list and it worked on the first go.Thanks very very helpful

By Vineet on 2nd September 2020

Thank you
By DS on 9th July 2020

Thank u very much Bro!
By Nish7007121529 on 7th July 2020

Thanks heaps, it helped me a lot :)
By Nagesh on 28th June 2020

Thanks Manny
By Daft Logic on 23rd May 2020

Here;s a one-liner Select by Value (post render):
tag.selectedIndex = Array.from( someArray,( {someKey} ) => someKey ).indexOf( someValue );

By Manny on 22nd May 2020

thx it was very helpful.
By joekrom on 2nd January 2020

:3
By JoseD on 12th September 2019

requirement :drop down dynamically binding all values and show the by default selected value
On 5th September 2019

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

30 out of 88 comments shown. See all comments.

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