title: How to set the 'selected option' of a select dropdown list with jquery
body: <p>I have the following jquery function:</p>
  
  <pre><code>$.post('GetSalesRepfromCustomer', {
      data: selectedObj.value
  }, function (result) {
      alert(result[0]);
      $('select[name^="salesrep"]').val(result[0]);
  });
  </code></pre>
  
  <p><code>result[0]</code> is a value that I want to set as the <code>selected</code> item in my select box.
  <code>result[0]</code> equals <code>Bruce jones</code>.</p>
  
  <p>the select box is populated by a database query but one of the rendered html is:</p>
  
  <pre><code>&lt;select id="salesrep" data-theme="a" data-mini="true" name="salesrep"&gt;
  &lt;option value=""&gt; &lt;/option&gt;
  &lt;option value="john smith"&gt;john smith&lt;/option&gt;
  &lt;option value="Bruce Jones"&gt;Bruce Jones&lt;/option&gt;
  &lt;option value="Adam Calitz"&gt;Adam Calitz&lt;/option&gt;
  &lt;option&gt;108&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><code>$('select[name^="salesrep"]').val(result[0]);</code> doesn't populate the select box selected option. I have also tried <code>$("#salesrep").val(result[0]);</code> without any luck.</p>
  
  <p>Any help appreciated.</p>
  
  <p>so what I want is the selected / highlighted option in the salesrep dropdown list to be Bruce Jones.</p>
  
  <p>HTML to be:</p>
  
  <pre><code>&lt;select id="salesrep" data-theme="a" data-mini="true" name="salesrep"&gt;
  &lt;option value=""&gt; &lt;/option&gt;
  &lt;option value="john smith"&gt;john smith&lt;/option&gt;
  &lt;option value="Bruce Jones" selected &gt;Bruce Jones&lt;/option&gt;
  &lt;option value="Adam Calitz"&gt;Adam Calitz&lt;/option&gt;
  &lt;option&gt;108&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Thanks again,</p>
  
  <p><strong>Entire Script</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
      $(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);
       }); 
  
       } 
       });
           });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Rendered HTML is:</p>
  
  <pre><code>&lt;select id="salesrep" data-theme="a" data-mini="true" name="salesrep"&gt;
  &lt;option value=""&gt; &lt;/option&gt;
  &lt;option value="RyanLubuschagne"&gt;Ryan Lubuschagne&lt;/option&gt;
  &lt;option value="Bruce Jones"&gt;Bruce Jones&lt;/option&gt;
  &lt;option value="Adam Calitz"&gt;Adam Calitz&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>