jQuery / Programmatically Select an Option in Select Box

Question

I'm currently using jQuery to return some JSON results. Once these results are returned, I'm using them to pre-populate fields in my form.

However, I need some help in pre-selecting items in a drop down box. For example, I have a select box (this is shortened):

<select id="startTime">
<option value="14:00:00">2:00 pm</option>
<option value="15:00:00">3:00 pm</option>
<option value="16:00:00">4:00 pm</option>
<option value="17:00:00">5:00 pm</option>
<option value="18:00:00">6:00 pm</option>
</select>

And if my JSON value is:

 var start_time = data[0].start  // Let's say this is '17:00:00'

How can I, using jQuery, make the option with value '17:00:00' selected?

 <option value="17:00:00" selected="selected">5:00 pm</option>

jQuery 1.9 changes this from .attr() to .prop(). I have provided an updated answer below. — Joshua, Mar 06 '13 at 19:12

score 93 · Accepted Answer · edited Nov 28 '19 at 17:57

93

update:

As of jQuery 1.9, jQuery has updated this functionality. The "selected" state of an option is actually a property, therefore jQuery has changed this to use the .prop() method. Syntax is very similar and easy to switch:

$('#startTime option[value=17:00:00]').prop('selected', true);

See http://api.jquery.com/prop/#entry-longdesc for why it needs to pass true.

Older jQuery

$('#startTime option[value=17:00:00]').attr('selected', 'selected');

or

$('#startTime option[value='+ data[0].start +']').attr('selected', 'selected');

edited Nov 28 '19 at 17:57

kahlan88

101
1
8

answered Oct 15 '09 at 17:44

Sam Hasler

12,344
10
72
106

11

Good answer. I would probably also recommend accounting for which selection box like so: $('#mySelect option[value="17:00:00"]').attr('selected','selected'); – Volomike Nov 19 '09 at 01:59
This code works perfect when JSON is one word, but when it has a space in it (two words) it breaks... any ideas? $('#selSource option[value='+ obj.DATA[0][obj.COLUMNS.indexOf('SOURCE')] +']').attr('selected', 'selected'); – user1431633 Sep 28 '12 at 22:34
needed to surround it with double quotes... $('#selSource option[value=\"'+ obj.DATA[0][obj.COLUMNS.indexOf('SOURCE')] +'\"]').attr('selected', 'selected'); – user1431633 Sep 28 '12 at 22:47
3

If you have javascript watching for select/option's change event you need to add .trigger('change') so the event will be fired. – kanitw May 27 '13 at 17:57
1

This will not work if you have a "default value", Such as "Select an option..." with a value = "". At least in Chrome, it will show that you have 2 options selected, the default and the one you selected programatically. Bug? In any case, use `$('#startTime').val(start_time);` instead – Serj Sagan Jun 14 '13 at 16:54
2

shouldn't you unselect the other options first/as well? – Sam Vloeberghs May 05 '14 at 09:59
1

@SamVloeberghs the select box will do that for you, unless it has set `multiple=true` – Sam Hasler Feb 26 '16 at 12:25
2

It should be `....prop('selected', true);` you are exploting that non empty string gets evaluated to true ... – jave.web Jul 08 '16 at 08:30
Since jQuery 1.9 is a few years old now, I'd suggest putting the .prop() solution at the top of this answer. Setting the attribute isn't as reliable. – Tim Grant Oct 21 '16 at 14:02

score 49 · Answer 2 · answered Oct 15 '09 at 17:42

49

$('#startTime').val(start_time);

answered Oct 15 '09 at 17:42

Corey Ballou

42,389
8
62
75

11

This needs to be the accepted answer. I don't understand the purpose of having to sniff through the Dom, perform possible string manipulations, and ultimately set the property value. It just makes sense to change the value of the select box unless I'm missing something.. – calcazar Nov 02 '16 at 15:20

score 12 · Answer 3 · answered Oct 15 '09 at 17:43

12

It's just $("#startTime").val(start_time);

answered Oct 15 '09 at 17:43

Jacob Mattison

50,258
9
107
126

This worked for me. The other options did not work in Safari.. :( – Kalaschni Aug 09 '18 at 06:06

score 11 · Answer 4 · answered Apr 07 '18 at 08:53

11

$('#startTime').val(start_time);

If you want to trigger selected change event after selecting option:

$('#startTime').trigger("change");

answered Apr 07 '18 at 08:53

sh497

131
2
5

2

Simple and effective! – Nowdeen Sep 24 '19 at 19:17

score 10 · Answer 5 · answered Mar 06 '13 at 19:11

10

UPDATE

As of jQuery 1.9, jQuery has updated changed this functionality. The "selected" state of an option is actually a property, therefore jQuery has changed this to use the .prop() method. Syntax is very similar and easy to switch:

$('option[value=17:00:00]').prop('selected', 'selected');

answered Mar 06 '13 at 19:11

Joshua

3,615
1
26
32

This just solved a huge problem I was having only in Firefox and Safari. Chrome and IE8 were behaving as expected with `.attr()`, but the others were breaking. – krillgar Oct 24 '14 at 14:53

score 2 · Answer 6 · answered Mar 27 '13 at 10:42

Additional Information for jquery mobile users (1.3.0):

Here's a similar example.

If you try the example above with jquery 1.9.1 and jquery mobile 1.3.0 you can see that it's not working unless you add a

$("#location_list").selectmenu("refresh");

Keep that in mind when working with jquery mobile. It gave me a lot of headache

score 2 · Answer 7 · answered Jul 25 '14 at 07:32

2

var varValue="17:00:00";
$("#startTime").ready(function(){ 
   $("#startTime option[value='"+varValue+"']").prop("selected", "selected"); });

Works for me on jQuery 1.10

answered Jul 25 '14 at 07:32

antoshib

21
1
7

score 2 · Answer 8 · edited Dec 21 '11 at 00:57

2

For some reason for me it works like this:

$('#startTime').val(''+data[0].start+'');

edited Dec 21 '11 at 00:57

animuson

53,861
28
137
147

answered Dec 20 '11 at 23:47

Adrian P.

5,060
2
46
47

1

I believe that's equivalent to running `$('#startTime').val(toString(data[0].start))` – thekingoftruth Feb 11 '14 at 19:42

jQuery / Programmatically Select an Option in Select Box

8 Answers8

Linked

Related