title: jQuery Mobile - Set select options as months
body: <p>I have a select field in JQM 1.4.5 that looks like this:</p>
  
  <pre><code>&lt;div class="ui-field-contain"&gt;
      &lt;select class="myMonthSel" name="select-native-2" id="select-native-2 monthSel" data-mini="true"&gt;
           &lt;OPTION value="NONE"&gt;Select a date&lt;/OPTION&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to dynamically load the options with months starting with the most current month. The function i am currently using looks like this:</p>
  
  <pre><code>function populateMonths() {
  
  var months = {
      "0": "January",
      "1": "February",
      "2": "March",
      "3": "April",
      "4": "May",
      "5": "June",
      "6": "July",
      "7": "August",
      "8": "September",
      "9": "October",
      "10": "November",
      "11": "December"
  };
  
  var monthSel = $('.myMonthSel');
  
  console.log(monthSel.length);
  var curDate = new Date;
  
  for (var i = 0; i &lt; 12; i++) {
      var val = (curDate.getMonth() + i) % 12;
      console.log(months[val]);
      monthSel.options[monthSel.length] = new Option(months[val], i);
  }
  } populateMonths();
  </code></pre>
  
  <p>I'm receiving the error in console: </p>
  
  <blockquote>
    <p>TypeError: Cannot set property '2' of undefined</p>
  </blockquote>
  
  <p>I've tried a few different options including, changing the selector to 
  $('.myMonthSel > option) and using an array instead of an object for months.</p>
  
  <p>Not sure what i'm doing incorrectly for this to not show up. I have a working jfiddle with the function here: <a href="https://jsfiddle.net/75exLm8a/11/" rel="nofollow noreferrer">https://jsfiddle.net/75exLm8a/11/</a></p>
  
  <p>Thank you.</p>