Question

I have a JQuery Mobile app. This app has a page with a “select” element. The options in the element need to be dynamically added. For the life of me, I can’t figure out how to do this. Currently, I’m trying the following:

page.html

<div id="myPage" data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Welcome</h1>
  </div>

  <div data-role="content">
    <select name="mySelector" id="mySelector" data-native-menu="false">
      <option>Please Choose</option>                
    </select>
  </div>
</div>

page.html.js

$("#myPage").live("pagebeforeshow", function (e, ui) {
  for (i=0; i<5; i++) {
    $("#mySelector", "#myPage").append('<option value="' + i + '">Option ' + (i+1) + '</option>');
  }
});

For some reason, my dynamic items won’t appear. What am I doing wrong?

Answer 1

It works for me but the select is disabled by default (idk why) http://jsfiddle.net/vjkaG/