我遇到了在jQuery mobile中动态填充选择菜单的问题。
当我附加选项时,初始值不显示,我只是得到一个空行。单击菜单时,值可以选择,但它只是初始视图。当我将菜单硬编码到页面中时,它工作正常。我认为这是因为我最初有一个空的下拉列表显示它应该和附加时,视图不知道更新所以继续显示一个空行。无论如何我在附加后可以强制视图更新吗?我试过.trigger("create")
,但这没有做任何事。
这是一个显示我的意思的屏幕。 “位置”下拉列表是我遇到的问题,“测试”下拉列表是我用硬编码来显示我想要实现的内容。
这是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>
这是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
);
答案 0 :(得分:20)
这就是诀窍:
$("#location").trigger("change");
答案 1 :(得分:7)
后:
$('#location').append('<option value="0">Add new location...</option>');
尝试:
$("#location").selectmenu('refresh', true);
答案 2 :(得分:0)
将所有选项附加到菜单后:
$("#location option[value='test1']").attr("selected", "selected");
或者您只想选择第一个值:
$("#location option:first").attr("selected", "selected");
答案 3 :(得分:0)
这对我有用
$(document).on('change', "body", function(){
$( ".ui-selectmenu" ).selectmenu();
});
如果不起作用则手动触发身体变化事件。
$('body').trigger('change');
答案 4 :(得分:0)
我用过这个,它对我有用:
$.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);