Question

I am having issues with dynamically populating a select menu in jQuery mobile.

When I append the options, the initial value isn’t shown and I just get a blank line. The values are there and selectable when clicking on the menu, but it is just the initial view. It works fine when I hardcode the menu into the page. I would assume it is because I initially have an empty dropdown which is showing as it should and when appending, the view doesn’t know to update so keeps showing an empty line. Is there anyway I can force the view to update after I have appended? I’ve tried .trigger("create") but this does nothing.

Here is a screen showing what I mean. The “location” dropdown is the one I am having issue with and the “test” one is one I have hard coded to show what I am trying to achieve.

Here’s the HTML:

<label for="location" class="select">Location</label>
<select name="location" id="location"></select>
<label for="test" class="select">Test DD</label>
<select name="test" id="test">
  <option value="test1">Test 1</option>
  <option value="test2">Test 2</option>
  <option value="test3">Test 3</option>
  <option value="test4">Test 4</option>
  <option value="test5">Test 5</option>
</select>

And here’s the JS:

tx.executeSql('SELECT * FROM locations WHERE lDeleted != 1',
  [],
  function(tx,results){
    var len = results.rows.length;
    for (var i=0; i<len; i++){
      $('#location').append('<option value="'+results.rows.item(i).ID+
        '" class="dropDownBlk">'+results.rows.item(i).lTitle+'</option>');
    }
    $('#location').append('<option value="0">Add new location...</option>')
  },
  errorCB
);

Answer 1

This has done the trick:

$("#location").trigger("change");