JQuery mobile. Dynamic Fill Select a menu. The option is not displayed initially

Question

I am having problems dynamically populating the select menu in jQuery mobile.

When I add parameters, the initial value is not displayed, and I just get an empty string. Values ​​are available and are selected by clicking on the menu, but this is only the initial view. It works great when I hard code the menu on the page. I would suggest that this is due to the fact that initially I have an empty drop-down list that displays as it should, and when the application is added, the view does not know to update, so it continues to show an empty string. Anyway, can I get the view to refresh after adding? I tried .trigger("create") but it does nothing.

Here is a screen showing what I mean. The dropdown menu “location” is the one I am facing, and the “test” is the one I hardcoded to show what I'm 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 is 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 did the trick:

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

Answer 2

After:

 $('#location').append('<option value="0">Add new location...</option>'); 

Try:

 $("#location").selectmenu('refresh', true); 

Answer 3

After adding all the parameters to the menu:

 $("#location option[value='test1']").attr("selected", "selected"); 

or if you just want the first value selected:

 $("#location option:first").attr("selected", "selected"); 

Answer 4

it works for me

 $(document).on('change', "body", function(){ $( ".ui-selectmenu" ).selectmenu(); }); 

and if it does not work manually.

 $('body').trigger('change'); 

Answer 5

I used this and it worked for me:

 $.each(AllTxnDAT_PRV, function(index, item) { var DocCode = item.DocCode; var DocName = item.DocName; htmlDOC += '<option value="' + DocCode + '">' + DocName + '</option>'; }); $('#DocType > option').remove(); $('#DocType').append($(htmlDOC)); $('#DocType').selectmenu(); $('#DocType').selectmenu('refresh', true);