jquerymobile。动态填充选择菜单。选项最初不显示
我在jQuery mobile中动态填充选择菜单时遇到问题 当我附加选项时,初始值没有显示,我只得到一个空行。当点击菜单时,这些值在那里并且是可选择的,但它只是初始视图。当我将菜单硬编码到页面中时,效果很好。我认为这是因为我最初有一个空下拉列表,它应该显示,当添加时,视图不知道更新,所以一直显示一个空行。在添加后,是否仍可以强制更新视图?我试过了,但这没用 这是一个屏幕,显示了我的意思。“位置”下拉列表是我遇到的问题,而“测试”下拉列表是我硬编码的,以显示我试图实现的目标 以下是HTML:jquerymobile。动态填充选择菜单。选项最初不显示,jquery,jquery-mobile,cordova,Jquery,Jquery Mobile,Cordova,我在jQuery mobile中动态填充选择菜单时遇到问题 当我附加选项时,初始值没有显示,我只得到一个空行。当点击菜单时,这些值在那里并且是可选择的,但它只是初始视图。当我将菜单硬编码到页面中时,效果很好。我认为这是因为我最初有一个空下拉列表,它应该显示,当添加时,视图不知道更新,所以一直显示一个空行。在添加后,是否仍可以强制更新视图?我试过了,但这没用 这是一个屏幕,显示了我的意思。“位置”下拉列表是我遇到的问题,而“测试”下拉列表是我硬编码的,以显示我试图实现的目标 以下是HTML: &l
<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
);
将所有选项附加到菜单后:
$("#location option[value='test1']").attr("selected", "selected");
或者,如果您只想选择第一个值:
$("#location option:first").attr("selected", "selected");
这就成功了:
$("#location").trigger("change");
之后:
这对我有用
$(document).on('change', "body", function(){
$( ".ui-selectmenu" ).selectmenu();
});
如果不工作,则手动触发车身更换事件
$('body').trigger('change');
我使用了这个,它对我起了作用:
$.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);
我喜欢这个主意。我尝试使用$location选项:first.attrselected,selected;但是这没有达到预期的效果。它应该可以工作,你确定你是在添加到位置的选项之后进行的吗?是的,是的。我想这也行。我找到了一个不同的解决办法。我试过了,但没用。如果我删除jquery mobile引用,它确实可以工作,但只要我将引用添加回,预填充就会消失。上面公布的弗雷泽的解决方案可以解决这个问题。
$('body').trigger('change');
$.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);