title: How to auto-select the first option in a dropdown list using jquery?
body: <p>I'm having trouble auto-selecting the first option in a dropdown list.</p>
  
  <p>I've tried using attr and val function (see <a href="https://jsfiddle.net/57ufay7o/" rel="nofollow noreferrer">this</a> jdfiddle link for an example) and it just wouldn't work. As a a test, my example has an  alert code that displays the .text() for the first option and this works fine. So my selector is working.</p>
  
  <p>Thanks a lot!</p>
  
  <p>sample HTML code:</p>
  
  <pre><code>&lt;select id="rt" name="rt" style="width: 300px;"&gt;
    &lt;option value="blank" selected="selected"&gt;- Select a fruit -&lt;/option&gt;
    &lt;option value="20270"&gt;Apple&lt;/option&gt;
    &lt;option value="20271"&gt;Banana&lt;/option&gt;
    &lt;option value="20273"&gt;Grapes&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  &lt;select id="rs" name="rs" style="width: 300px;"&gt;
    &lt;option value="blank" selected="selected"&gt;- Select a car -&lt;/option&gt;
    &lt;option value="20226"&gt;Toyota&lt;/option&gt;
    &lt;option value="20227"&gt;Chevy&lt;/option&gt;
    &lt;option value="20228"&gt;Mazda&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>sample JS  code:</p>
  
  <pre><code>$("#rs").on("change", function() {
      alert("rt: "+$("#rt option:first-child").text());
      $("#rt option:first-child").attr("selected", "selected");
      //$("#rt option:first-child").val("blank");
  });
  </code></pre>