Jquery-Mobile: Append the data to the non-native select option menu

Jquery-Mobile: Append the data to the non-native select option menu

原文

Question

I have a problem with adding the data to non-native select option menu on Jquery Mobile. Here’s my code :

in html :

<select id="my-select" data-native-menu="false"></select>

in javascript :

var len = results.rows.length;
var s = '';
for (var i=0; i<len; i++){
$('#my-select')
.html($("<option></option>")
.attr("value",results.rows.item(i).id)
.text(results.rows.item(i).name));
}

So, if i delete the “data-native-menu=“false””, that code is works perfectly. Whats wrong with my code ?

Answer

You need to tell jQM to refresh/rebuild the widget any time you change the options within the selectmenu:

http://api.jquerymobile.com/selectmenu/#method-refresh

$('#my-select').selectmenu( "refresh", true );

FYI. by using html($("")…) within the for loop, you are overwriting the all options each time. Instead, use .empty() to clear existing options before the loop, and use append() to add the new ones.

To make it more efficient, create a string of all options and append them to the DOM once after the loop:

var opts = '';
for (var i=0; i<len; i++){
    opts += '<option value="' + results.rows.item(i).id + '">' + results.rows.item(i).name + '</option>';
}
$('#my-select').empty().append(opts).selectmenu( "refresh", true );