How to set default value for HTML select?

Question

I have a HTML select like this:

<select>
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

and I have a variable named temp in my JavaScript:

var temp = "a";

Now I want to set the value of the option that is equal to temp as default value for my select.

How can I do it?

I suppose you mean dynmically? – Zevi Sternlicht Oct 26 '13 at 20:32 — Zevi Sternlicht, Oct 26 '13 at 20:32

score 73 · Answer 1 · edited Oct 05 '21 at 08:25

73

You first need to add values to your select options and for easy targetting give the select itself an id.

Let's make option b the default:

<select id="mySelect">
    <option>a</option>
    <option selected="selected">b</option>
    <option>c</option>
</select>

Now you can change the default selected value with JavaScript like this:

<script>
var temp = "a";
var mySelect = document.getElementById('mySelect');

for(var i, j = 0; i = mySelect.options[j]; j++) {
    if(i.value == temp) {
        mySelect.selectedIndex = j;
        break;
    }
}
</script>

Also we can use "text" property of i to validate:

if(i.text == temp)

See it in action on codepen.

edited Oct 05 '21 at 08:25

IngVik

3
2

answered Oct 26 '13 at 20:31

Sébastien

11,860
11
58
78

3

+1 for the most complete answer and working example provided! – Automate This Oct 26 '13 at 20:49
11

+1 for using javascript; the "accepted" answer uses jQuery. – akalata Apr 29 '14 at 14:46
3

This is definitely the right answer. The codepen has an error though - uses a , where it should have a ; this one works though http://codepen.io/anon/pen/LEVjvr – ovann86 Nov 26 '14 at 01:09
2

Thank You for pointing this out @ovann86. I updated the codepen example. – Sébastien Nov 26 '14 at 21:56
Could you extend your answer for Html helpers? For example: @Html.DropDownListFor(Function(Model) Model.ReportId, New SelectList(Model.allReports, "ReportID", "ReportName", New With {.class = "form-control", .id = "ReportID"}), "Select Report....") – JoshYates1980 May 03 '16 at 16:49

Automate This · Accepted Answer · 2020-03-23T17:21:50.550

29

Note: this is JQuery. See Sébastien answer for Javascript

$(function() {
    var temp="a"; 
    $("#MySelect").val(temp);
});

<select name="MySelect" id="MySelect">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>

edited Mar 23 '20 at 17:21

answered Oct 26 '13 at 20:31

Automate This

30,726
11
60
82

score 7 · Answer 3 · edited Jun 07 '18 at 12:09

7

You should define the attributes of option like selected="selected"

<select>
   <option selected="selected">a</option>
   <option>b</option>
   <option>c</option>
</select>

edited Jun 07 '18 at 12:09

Erik Honn

7,576
5
33
42

answered Oct 26 '13 at 21:02

user2923853

95
4

score 5 · Answer 4 · edited Jun 07 '18 at 11:51

5

Simplay you can place HTML select attribute to option a like shown below

Define the attributes like selected="selected"

<select>
   <option selected="selected">a</option>
   <option>b</option>
   <option>c</option>
</select>

edited Jun 07 '18 at 11:51

Ashraf.Shk786

618
1
11
23

answered Oct 26 '13 at 20:31

Naveen Kumar Alone

7,536
5
36
57

score 2 · Answer 5 · answered Oct 26 '13 at 20:42

2

you can define attribute selected="selected" in Ex a

answered Oct 26 '13 at 20:42

siddharth jambukiya

373
3
11

score 0 · Answer 6 · answered Oct 26 '13 at 20:34

0

You could use...

<option <?= ($temp == $value) ? "SELECTED" : "" ?> >$value</opton>

Edit: I thought I was looking at PHP questions... Sorry.

answered Oct 26 '13 at 20:34

Gavin

2,123
1
15
19

How to set default value for HTML select?

6 Answers6

Linked