Question

我想在每次向用户显示页面时以编程方式更新jQuery Mobile选择输入中的选项（而不仅仅是首次创建页面时）。

我尝试这样做是为了在触发页面显示时更新选择，但是当data-native-menu设置为false并且有足够的选项可以显示单独的对话框时，这会中断。那么，应该怎么做呢？

问题的实质是这一行：

$(document).on("pageshow", pageID, functionToUpdateSelect);

当有很多选项时，这样的行与使用自定义菜单界面的select语句不兼容。

我已将a small JSFiddle that shows this problem放在一起。

我看到虽然两年前someone reported this as a bug，它几乎立即关闭，所以我认为必须有一些方法可以摆脱这个洞！

Answer 1

这可能是 bug ，但是，它可以修复。

jQuery Mobile将select与data-native-menu="false"转换为弹出窗口或对话框，具体取决于选项数量和视口的身高。后者的行为类似于页面，因此会触发页面事件，即pageshow，Pagehide`等等。

要解决此问题，您需要先检查select菜单是否包含任何选定的选项。如果不是，请将0索引设置为第一个。否则，将选定的选项设置为选中并刷新选择菜单。

function updateSelect() {

    var options = "<option data-placeholder='true'>Select an option</option>";

    for (var i = 1; i <= numberOfOptions; i++) {
        options += "<option>option " + i + "</option>";
    }

    /* retrieve index of selected option 
       if -1, set first option (placeholder)
       otherwise, it returns index of selected */

    var selected = $("#p1_select option:selected").index() == -1 ? 0 : $("#p1_select option:selected").index();

    /* refresh after adding options */

    $("#p1_select").html(options).selectmenu("refresh");

    /* set selected based on value 
       retrieved in previous step 
       and then refresh selectmenu */

    $("#p1_select option:eq(" + selected + ")").prop("selected", true);

    $("#p1_select").selectmenu("refresh");
}

<强> Demo

jQuery Mobile：如何在页面显示上更新选择

1 个答案: