jQuery / Programmatically Select an Option in Select Box
JavascriptJquerySelectJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
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');
Solution 2 - Javascript
$('#startTime').val(start_time);
Solution 3 - Javascript
It's just $("#startTime").val(start_time);
Solution 4 - Javascript
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');
Solution 5 - Javascript
$('#startTime').val(start_time);
If you want to trigger selected change event after selecting option:
$('#startTime').trigger("change");
Solution 6 - Javascript
For some reason for me it works like this:
$('#startTime').val(''+data[0].start+'');
Solution 7 - Javascript
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
Solution 8 - Javascript
var varValue="17:00:00";
$("#startTime").ready(function(){
$("#startTime option[value='"+varValue+"']").prop("selected", "selected"); });
Works for me on jQuery 1.10