javascript - Jquery-Mobile:将数据附加到非 native 选择选项菜单

Question

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

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