How to set the 'selected option' of a select dropdown list with jquery
I have the following jquery function:
$.post('GetSalesRepfromCustomer', {
data: selectedObj.value
}, function (result) {
alert(result[0]);
$('select[name^="salesrep"]').val(result[0]);
});
result[0] is a value that I want to set as the selected item in my select box. result[0] equals Bruce jones .
the select box is populated by a database query but one of the rendered html is:
<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="john smith">john smith</option>
<option value="Bruce Jones">Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
<option>108</option>
</select>
$('select[name^="salesrep"]').val(result[0]); doesn't populate the select box selected option. I have also tried $("#salesrep").val(result[0]); without any luck.
Any help appreciated.
so what I want is the selected / highlighted option in the salesrep dropdown list to be Bruce Jones.
HTML to be:
<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="john smith">john smith</option>
<option value="Bruce Jones" selected >Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
<option>108</option>
</select>
Thanks again,
Entire Script
<script type="text/javascript">
$(document).ready(function () {
$("#customer").autocomplete(
{
source: "get_customers",
messages:
{
noResults: '',
results: function() {}
},
select: function( event, ui )
{
var selectedObj = ui.item;
$.post('GetSalesRepfromCustomer', {data:selectedObj.value},function(result) {
alert(result[0]);
var selnametest="Bruce Koller";
$("#salesrep").val(selnametest);
});
}
});
});
</script>
Rendered HTML is:
<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="RyanLubuschagne">Ryan Lubuschagne</option>
<option value="Bruce Jones">Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
</select>
Try this :
$('select[name^="salesrep"] option[value="Bruce Jones"]').attr("selected","selected");
Just replace option[value="Bruce Jones"] by option[value=result[0]]
And before selecting a new option, you might want to "unselect" the previous :
$('select[name^="salesrep"] option:selected').attr("selected",null);
You may want to read this too : jQuery get specific option tag text
Edit: Using jQuery Mobile, this link may provide a good solution : jquery mobile - set select/option values
Set the value it will set it as selected option for dropdown:
$("#salesrep").val("Bruce Jones");
Here is working Demo
If it still not working:
One thing I don't think anyone has mentioned, and a stupid mistake I've made in the past (especially when dynamically populating selects). jQuery's .val() won't work for a select input if there isn't an option with a value that matches the value supplied.
Here's a fiddle explaining -> http://jsfiddle.net/go164zmt/
<select id="example">
<option value="0">Test0</option>
<option value="1">Test1</option>
</select>
$("#example").val("0");
alert($("#example").val());
$("#example").val("1");
alert($("#example").val());
//doesn't exist
$("#example").val("2");
//and thus returns null
alert($("#example").val());