How to set the 'selected option' of a select dropdown list with jquery

Question

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> 

Answer 1

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