Jquery-Mobile：将数据附加到非本机选择选项菜单

Question

我在将数据添加到 Jquery Mobile 上的非本地选择选项菜单时遇到问题。这是我的代码：

在 html 中：

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

在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));
}

所以，如果我删除“data-native-menu="false"”，该代码就可以完美运行。我的代码有什么问题？

谢谢

Answer 1

您需要告诉 jQM 在您更改选择菜单中的选项时刷新/重建小部件：

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

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

仅供参考。通过在 for 循环中使用 html($("")...) ，您每次都会覆盖所有选项。相反，使用 .empty() 在循环之前清除现有选项，并使用 append() 添加新选项。

为了提高效率，创建一个包含所有选项的字符串，并在循环后将它们附加到 DOM：

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 );