jQuery mobile. Dynamically filling Select menu. Option doesn't display initially
Solution 1
This has done the trick:
$("#location").trigger("change");
Solution 2
After:
$('#location').append('<option value="0">Add new location...</option>');
Try:
$("#location").selectmenu('refresh', true);
Fraser
UK Web Developer. Co host of Three Devs and a Maybe www.threedevsandamaybe.com
Updated on September 16, 2022Comments
-
Fraser over 1 year
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 );