How to preselect option in select box using jQuery

Question

I have one select box with various options.

When a page loads then one option with a value, for example 10, should be preselected with jQuery.

How can I do that?

Adam · Accepted Answer · 2010-06-24T00:41:11.417

27

When the page loads run this (you can put it in <body onload="//put code here">):

$("option[value='10']").attr('selected','selected');

edited Jun 24 '10 at 00:41

answered Jun 24 '10 at 00:26

Adam

43,763
16
104
144

You'll need to remove the descendant operator (space) from the selector for it to work. :o) – user113716 Jun 24 '10 at 00:32
1

+1 I prefer this approach more so than using `val()` to set these. I'm not even sure how `val()` is supposed to work if you are presenting a multiple-select listbox... – Funka Jun 24 '10 at 00:51
3

@Funka - If it is a multiple select, it will accept an array of values to set. *example* http://jsfiddle.net/VArCZ/2/ – user113716 Jun 24 '10 at 00:54
@Adam, how to select it based on the select id? – Jafar Pinjar Jan 04 '19 at 11:41
Just use `$("#myId")` – Adam Jan 04 '19 at 22:16

score 23 · Answer 2 · answered Jun 24 '10 at 00:23

23

Test the example: http://jsfiddle.net/VArCZ/

$(document).ready(function() {

    $('#mySelectBox').val('10');

});

Although, jQuery wouldn't be required for this if the intial value will be static:

<select id='mySelectBox'>
    <option value='5'>5</option>
    <option value='10' selected='selected'>10</option>
    <option value='15'>15</option>
</select>

answered Jun 24 '10 at 00:23

user113716

318,772
63
451
440

3

+1 Correct of course! I might add that with `.val()` you supply the value between the `` tags, not the `value=` attribute. So in the case of `` you would use `$("#mySelectBox").val('Ten')` – Doug Neiner Jun 24 '10 at 00:47
1

@Doug - Actually, if there is a value attribute present, it matches against that first. If no value attribute, then it tries to match against the text content. But thanks for the +1. :o) *updated example:* http://jsfiddle.net/VArCZ/1/ – user113716 Jun 24 '10 at 00:51
Dude.. seriously? I always thought that method was #fail... I need to read the source more. Thanks! – Doug Neiner Jun 24 '10 at 02:01
1

@Doug - Full disclosure: I had to do a quick scramble to make sure I had it right. Happens more often than I care to admit. :o) – user113716 Jun 24 '10 at 02:07

score 1 · Answer 3 · answered Oct 12 '16 at 12:20

1

In the latest jQuery version this works for me:

$("option[value='10']").prop('selected',true);

answered Oct 12 '16 at 12:20

Kevin Lieser

951
1
9
25

score 0 · Answer 4 · edited Jun 04 '13 at 11:35

0

Above code is working you can use following code:

$("option[value='10']").attr('selected','selected');

edited Jun 04 '13 at 11:35

Taryn

242,637
56
362
405

answered Jun 04 '13 at 10:47

purab

211
1
3
9

How to preselect option in select box using jQuery

4 Answers4

Linked