javascript - Dynamically appended select menu with 1st option disabled automatically selects 2nd option -

i have hit weird case where, best of knowledge, 2 things should act same behave quite differently.

if have 2 select menus on page, 1 static menu hardcoded in html , 1 appended body @ runtime jquery. disable first option in both select menus. when displayed both menus have first options disabled expected, dynamically appended menu has automatically set value second option while static menu still has first selected.

http://jsfiddle.net/hm3xgklg/1/

html:

<select class="dropmenu">   <option value="1">first</option>   <option value="2">second</option>   <option value="3">third</option>   <option value="4">fourth</option> </select> 

javascript:

var arr = [   {val : 1, text: 'one'},   {val : 2, text: 'two'},   {val : 3, text: 'three'},   {val : 4, text: 'four'} ];  var sel = $('<select class="dropmenu">').appendto('body'); $(arr).each(function() {    sel.append($("<option>").attr('value',this.val).text(this.text));  }); $('.dropmenu option:nth-child(1)').attr('disabled', 'disabled'); 

why these 2 seemingly identical select menus behaving differently? both act static menu (keep 1st value selected) possible?

it should noted tried wrapping disable function in $(document).ready rule out issue of menu not being rendered yet there no change. tried having 2 distinct classes 2 separate calls disable options make sure wasn't clashing somehow no change.

why these 2 seemingly identical select menus behaving differently

this because first select part of document , parsed. as per spec here:

the initial state has first option selected..

and hence first option pre-selected. later on when disable 1 option, doesn't change selection.

example 1: can see first select has disabled attribute applied first option in markup. second option gets pre-selected, compared second select.

<select class="dropmenu">      <option value="1" disabled>first</option>      <option value="2">second</option>      <option value="3">third</option>      <option value="4">fourth</option>  </select>  <select class="dropmenu">      <option value="1">first</option>      <option value="2">second</option>      <option value="3">third</option>      <option value="4">fourth</option>  </select>

in case of dynamically adding select using javascript, second select created , added body immediately. when became part of dom, there no options , hence no pre-selection possible. later when append options it, , disable 1 of options, seems gets executed fast , time loaded first option disabled , second 1 gets pre-selected.

example 2: not append select body. append after have options populated. time first option pre-selected despite changing disabled attribute later on.

var arr = [    {val : 1, text: 'one'},    {val : 2, text: 'two'},    {val : 3, text: 'three'},    {val : 4, text: 'four'}  ];    var sel = $('<select class="dropmenu">');  $(arr).each(function () {      sel.append($("<option>").attr('value', this.val).text(this.text));  });    sel.appendto('body'); /* <--- append here */    $('.dropmenu option:nth-child(1)').prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <select class="dropmenu">      <option value="1">first</option>      <option value="2">second</option>      <option value="3">third</option>      <option value="4">fourth</option>  </select>

example 3: add delay before disable option. give intended behaviour of getting first option pre-selected because have enough time.

var arr = [    {val : 1, text: 'one'},    {val : 2, text: 'two'},    {val : 3, text: 'three'},    {val : 4, text: 'four'}  ];    var sel = $('<select class="dropmenu">').appendto('body');  $(arr).each(function () {      sel.append($("<option>").attr('value', this.val).text(this.text));  });    settimeout(disable, 1000); /* <--- give delay here */    function disable() {      $('.dropmenu option:nth-child(1)').prop('disabled', true);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <select class="dropmenu">      <option value="1">first</option>      <option value="2">second</option>      <option value="3">third</option>      <option value="4">fourth</option>  </select>

example 4: can select 1 option explicitly before disabling them.

var arr = [    {val : 1, text: 'one'},    {val : 2, text: 'two'},    {val : 3, text: 'three'},    {val : 4, text: 'four'}  ];    var sel = $('<select class="dropmenu">').appendto('body');  $(arr).each(function () {      sel.append($("<option>").attr('value', this.val).text(this.text));  });    $('.dropmenu option:nth-child(1)').prop('selected', true); /* <-- select explicitly */  $('.dropmenu option:nth-child(1)').prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <select class="dropmenu">      <option value="1">first</option>      <option value="2">second</option>      <option value="3">third</option>      <option value="4">fourth</option>  </select>