jQuery移动。动态填充选择菜单。选项最初不显示

时间:2012-07-15 07:05:11

标签: jquery jquery-mobile cordova

我遇到了在jQuery mobile中动态填充选择菜单的问题。

当我附加选项时,初始值不显示,我只是得到一个空行。单击菜单时,值可以选择,但它只是初始视图。当我将菜单硬编码到页面中时,它工作正常。我认为这是因为我最初有一个空的下拉列表显示它应该和附加时,视图不知道更新所以继续显示一个空行。无论如何我在附加后可以强制视图更新吗?我试过.trigger("create"),但这没有做任何事。

这是一个显示我的意思的屏幕。 “位置”下拉列表是我遇到的问题,“测试”下拉列表是我用硬编码来显示我想要实现的内容。

enter image description here

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

5 个答案:

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