JQueryMobile 动态添加的选项未反映答案

【问题标题】：JQueryMobile dynamically added options not being reflectedJQueryMobile 动态添加的选项未反映
【发布时间】：2015-07-15 21:59:15
【问题描述】：

使用 JQM 1.4.5。我正在添加来自 Web 服务的结果，并将结果添加到选择中。如果我从我的 chrome 控制台使用$("#statsSelect")，我可以看到添加到我的选择中的所有记录，但这些更改永远不会反映在页面上。如果我检查选择菜单所在的元素，则只有原始选项。

目前我加载 html 页面，然后我插入下面的选择 html，然后我为我的数据调用 ajax，然后我使用 addStatsTemplate 插入它。永远不会显示动态添加的选项。

Main.js 文件加载以下内容，运行getAllUsersStats(ajax call) 并传递addStatTemplates，这是下面的回调函数引用。

$('#statsPage').bind("pageshow",function(){ // When entering pagetwo
    /** Add the stats returned to the select tag **/
    loadStatsPage();
    getAllUsersStats(addStatTemplates);
});

插入我的选择 html 的函数

 var targetInsert = '[data-role=content]';
 insertStatsSelect(targetInsert);
 $.get('/forms/CreateStatsForm.html', function (retData) {
     $(targetInsert).append(retData).trigger('create');
 });

我的选择

<div class="ui-field-contain">
  <label for="statsSelect" class="select">Stats:</label>
  <select name="statsSelect" id="statsSelect">
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
  </select>
</div>

将json数据添加到select的函数

/**
 * Add the returned stats to the select tag
 */
function addStatTemplates(data){
    var statsSelect = $('#statsSelect').selectmenu();
    $(statsSelect).empty();
    var f = false;
    $.each(data,function(i, v){
        var sheetname = v.sheetname;
        if(f === false){
            $(statsSelect).append($("<option>").attr("value", v.id).attr("selected", "selected").text(sheetname));
        } else {
            $(statsSelect).append($("<option>").attr("value", v.id).text(sheetname));
        }
        f = true;
    });
    $(statsSelect).selectmenu("refresh", true);
}

我尝试过的事情

像'<option value="'+id+'">'+sheetname+'</option>' 这样的字符串插入选项
我尝试过使用 .html() 添加而不是追加
我只使用了$('#statsSelect') 而不是var statsSelect = $('#statsSelect').selectmenu();
我尝试在插入后添加$(statsSelect).selectmenu(); 然后$(statsSelect).selectmenu("refresh", true);。我也在控制台中尝试过这些，但它不起作用
我已尝试$('#myPageID').trigger('create'); 重新创建页面

我知道这个问题已经被搁置了，但我似乎无法弄清楚为什么它没有显示

【问题讨论】：

标签： javascript jquery cordova jquery-mobile

【解决方案1】：

显然，正确定位选择菜单的唯一方法是使用

$("html #statsSelect");

并在 id 标记之前放置“html”。否则，它将在 DOM 中的某处创建一个新的选择标签并将其添加到可见标签但不显示结果。太棒了……

【讨论】：