javascript - 强制 safari iOS 选择组件在选项更改时更新

Question

当您使用 iOS (iPhone) 在网页上点击一个选择输入时，会弹出一个微调器小部件(“选择器”)，让您可以旋转并选择该选择中的选项。假设您已点击其中之一并且选择器小部件已打开。当它打开时，如果您使用 javascript 修改选择选项(通过 dom 添加、删除、更新选项)，那么除非用户关闭并重新打开小部件，否则这些更改不会反射(reflect)在小部件中。

有没有办法强制浏览器自动更新选项？

编辑:这是一个示例，您可以使用它来观察更新选择选项如何不更新选择器小部件:http://jsfiddle.net/RrsNk/

<select id="my-select" />

$(function () {
    updateSelect();
});

function updateSelect() {
    $("#my-select").empty();
    for (i = 0; i < 5; i++) {
        var ran = Math.random();
        $("<option />").attr("value", ran).html(ran).appendTo("#my-select");
    }
    setTimeout(updateSelect, 2000);
}

Answer 1

Safari 使用 UIPickerView 来显示下拉菜单。如您所料，页面中下拉组件的标题会根据 DOM 中的更改进行更新，但选择器 View 与 DOM 的耦合度不高，因此不会更新。 Chrome 和 Opera Mini 的情况也是如此。

总而言之，您尝试实现的是不可能的。您应该寻找其他方法使您的数据集易于访问。