强制 Safari iOS 选择组件在选项更改时更新

Question

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

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

编辑：这是一个示例，您可以使用它来观察更新选择选项如何不会更新选择器小部件：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 的变化而更新，但选择器视图与 DOM 没有紧密耦合，因此不会更新。 Chrome 和 Opera Mini 的情况也是如此。

因此，总而言之，您尝试实现的内容是不可能的。您应该寻找其他方法让您的数据集可访问。

Answer 2

我被认为是最接近我的用例的问题，它相似但不完全相同，并且可能适用于其他人，因为这是一种常见情况。我发现这里的答案有点令人困惑，所以只是想澄清一下我的发现。

1. 我从一个下拉列表开始，其中仅包含一个 option：Searching...。
2. 当用户点击时，“picker”弹出（iPad 上的“tick-list”，与 iPhone 上的“spinner”原理相同），显示Searching...。
3. AJAX 调用从服务器获取选项，JavaScript 将 options[] 更新为这些选项。
4. 此时，选择器仍然只显示Searching...，用户不知道它已被重新填充。用户必须单击外部以关闭“选择器”，然后再次单击下拉菜单以查看新选项。

所以在我的情况下，我没有 OP 的情况，即根据在第一个下拉列表中选择的选项来显示第二个下拉列表。相反，我希望（＃1）“选择器”消失，然后（＃2）重新出现（带有新的选择）。

现在，您似乎可以做#1，但不能做#2。

1. 您可以通过dropdown.blur() 关闭“选择器”（在Mobile Safari 中测试）。见Close a SELECT dropdown list programatically with Javascript/jQuery。
2. 您不能导致“选择器”再次弹出（至少在 Mobile Safari 中不会）。见How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?。

所以我至少在做#1，以便用户获得一些反馈，而不是仅仅停留在Searching...。

如果有人能说明您如何在 Mobile Safari 上执行 #2，我会很想听听......

Answer 3

值得一试：当第一个选择列表中的项目被选中时，填充第二个 <select> 元素和 .focus()。

请注意，iOS 仅允许将控件集中在用户交互事件（触摸结束或单击事件）中，因此我猜测 Safari Mobile 可能允许 .focus() 在 <select> 中工作（打开第二个选择列表） .

可能不起作用，因为选择列表的 onchange 事件可能不会被视为“交互式”，否则 Safari Mobile 可能会因某种原因不允许 selectElement.focus() 工作。

编辑：我认为这表明它不太可能起作用：force safari iOS select component to update when options change

如果您需要联系服务器来填写列表，请不要费心尝试。那是因为当你得到响应事件时，你肯定不在用户交互式点击/点击事件处理程序中，所以.focus() 肯定会被忽略（尽管异步链工作的可能性很小）。

Answer 4

首先，您为什么要这样做 - 您应该调整 HTML 文件中的值，或者在页面加载时使用 JavaScript。

但是，如果值在用户选择下拉列表时发生变化，您可以使用 JavaScript 选择另一个元素，然后重新选择下拉列表，使其重新加载。

您可以使用 focus() 方法将焦点放在元素上。例如。 Document.getElementById("input").focus();