title: Dynamically appended select menu with 1st option disabled automatically selects 2nd option
body: <p>I have hit a weird case where, to the best of my knowledge, two things that should act the same behave quite differently. </p>
  
  <p>If I have two select menus on a page, one static menu hardcoded in the HTML and one appended to the body at runtime with JQuery. I then disable the first option in both select menus. When displayed both menus have their first options disabled as expected, however the dynamically appended menu has automatically set the value to the second option while the static menu still has the first selected.</p>
  
  <p><a href="http://jsfiddle.net/hm3xgkLg/1/">http://jsfiddle.net/hm3xgkLg/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select class="dropMenu"&gt;
    &lt;option value="1"&gt;First&lt;/option&gt;
    &lt;option value="2"&gt;Second&lt;/option&gt;
    &lt;option value="3"&gt;Third&lt;/option&gt;
    &lt;option value="4"&gt;fourth&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var arr = [
    {val : 1, text: 'One'},
    {val : 2, text: 'Two'},
    {val : 3, text: 'Three'},
    {val : 4, text: 'Four'}
  ];
  
  var sel = $('&lt;select class="dropMenu"&gt;').appendTo('body');
  $(arr).each(function() {
     sel.append($("&lt;option&gt;").attr('value',this.val).text(this.text));
   });
  $('.dropMenu option:nth-child(1)').attr('disabled', 'disabled');
  </code></pre>
  
  <p>Why are these two seemingly identical select menus behaving differently? I would like both to act like the static menu (keep 1st value selected) is that possible?</p>
  
  <p>It should also be noted I tried wrapping the disable function in $(document).ready to rule out an issue of the menu not being rendered yet but there was no change. I also tried having two distinct classes with two separate calls to disable the options to make sure its wasn't clashing somehow with no change. </p>