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
– Joshua, Commented Mar 6, 2013 at 19:12

kahlan88 · Accepted Answer · 2019-11-28 17:57:27Z

96

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, 2019 at 17:57

kahlan88

1011 silver badge8 bronze badges

answered Oct 15, 2009 at 17:44

Sam Hasler

12.7k10 gold badges74 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Volomike Over a year ago

Good answer. I would probably also recommend accounting for which selection box like so: $('#mySelect option[value="17:00:00"]').attr('selected','selected');

kanitw Over a year ago

If you have javascript watching for select/option's change event you need to add .trigger('change') so the event will be fired.

Serj Sagan Over a year ago

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

Sam Vloeberghs Over a year ago

shouldn't you unselect the other options first/as well?

jave.web Over a year ago

It should be ....prop('selected', true); you are exploting that non empty string gets evaluated to true ...

|

Corey Ballou · Accepted Answer · 2009-10-15 17:42:40Z

52

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

answered Oct 15, 2009 at 17:42

Corey Ballou

43.7k8 gold badges66 silver badges77 bronze badges

1 Comment

calcazar Over a year ago

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..

Jacob Mattison · Accepted Answer · 2009-10-15 17:43:18Z

13

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

answered Oct 15, 2009 at 17:43

Jacob Mattison

51.2k11 gold badges109 silver badges128 bronze badges

1 Comment

Kalaschni Over a year ago

This worked for me. The other options did not work in Safari.. :(

sh497 · Accepted Answer · 2018-04-07 08:53:48Z

12

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

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

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

answered Apr 7, 2018 at 8:53

sh497

1512 silver badges5 bronze badges

1 Comment

Nowdeen Over a year ago

Simple and effective!

Joshua · Accepted Answer · 2013-03-06 19:11:23Z

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 6, 2013 at 19:11

Joshua

3,6031 gold badge30 silver badges32 bronze badges

1 Comment

krillgar Over a year ago

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.

animuson · Accepted Answer · 2011-12-21 00:57:24Z

2

For some reason for me it works like this:

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

edited Dec 21, 2011 at 0:57

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Dec 20, 2011 at 23:47

Adrian P.

5,2482 gold badges50 silver badges49 bronze badges

1 Comment

thekingoftruth Over a year ago

I believe that's equivalent to running $('#startTime').val(toString(data[0].start))

John Thompson · Accepted Answer · 2013-03-27 10:42:25Z

2

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

answered Mar 27, 2013 at 10:42

John Thompson

1601 silver badge9 bronze badges

Comments

antoshib · Accepted Answer · 2014-07-25 07:32:56Z

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, 2014 at 7:32

antoshib

211 silver badge7 bronze badges

Collectives™ on Stack Overflow

jQuery / Programmatically Select an Option in Select Box

8 Answers 8

9 Comments

1 Comment

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

9 Comments

1 Comment

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related