Jquery-Mobile: 将数据附加到非本地 select 选项菜单

Question

我在将数据添加到 Jquery 移动设备上的非本机 select 选项菜单时遇到问题。这是我的代码：

在 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 refresh/rebuild 小部件：

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

Jquery-Mobile: 将数据附加到非本地 select 选项菜单

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

html

javascript

jquery

jquery-mobile