Javascript 选项更改时强制safari iOS选择组件更新

当您使用iOS iPhone在网页上点击选择输入时，会弹出一个微调器小部件，选择器允许您在该选择中旋转并选择选项。假设您已点击其中一个，并且选择器小部件已打开。在打开时，如果使用javascript通过dom修改选择选项add、remove和update选项，则这些更改不会反映在小部件中，除非用户关闭并重新打开小部件

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

编辑：下面是一个示例，可以用来观察更新选择选项如何不更新选择器小部件：

---

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

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

可以使用focus方法将焦点移到元素。如。 Document.getElementByIdinput.focus

Safari使用UIPickerView显示下拉菜单。正如您所期望的，页面中下拉组件的标题会根据DOM中的更改进行更新，但是选择器视图与DOM没有紧密耦合，因此不会进行更新。Chrome和Opera Mini的情况也是如此

---

总之，你不可能实现你想要实现的东西。您应该寻找其他方法来访问您的数据集。

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

我从一个只包含一个选项的下拉列表开始：搜索。。。。 当用户点击时，选择器在iPad上弹出一个勾号列表，与iPhone上的旋转器原理相同，显示搜索。。。。 AJAX调用从服务器获取选项，JavaScript将选项[]更新为这些选项。 此时，选择器仍然显示正在搜索…，用户不知道它是否已被重新填充。用户必须单击“外部”以关闭选择器，然后再次单击下拉列表以查看新选项。 因此，在我的例子中，我不希望根据第一个下拉列表中选择的选项显示第二个下拉列表。我更希望1选择器消失，然后2带着新的选择重新出现

现在，你似乎可以做1，但不能做2

您可以通过在Mobile Safari中测试dropdown.blur来关闭选择器。看见 您不能使拾取程序再次弹出，至少在Mobile Safari中不能。看见 所以我至少在做1，这样用户就可以得到一些反馈，而不是仅仅停留在搜索上

---

如果有人能告诉我如何在Mobile Safari上完成2，我很想听听……

值得一试：填充第二个元素，并在选择第一个选择列表中的项目时关注它

请注意，iOS只允许在用户交互事件touchend或click事件中对控件进行聚焦，因此我猜Safari Mobile可能会允许。在打开第二个选择列表之前，聚焦可以在中工作

可能不起作用，因为选择列表的onchange事件可能不被认为是交互式的，或者Safari Mobile可能因为某些原因不允许selectElement.focus工作

编辑：我认为这表明它不太可能起作用：

---

如果您需要联系服务器来填写列表，请不要费心尝试。这是因为当您获得响应事件时，您肯定不在用户交互点击/点击事件处理程序中，因此。尽管异步链可能会工作，但焦点肯定会被忽略。

不幸的是，焦点不会触发拾取程序在iOS上打开。用户必须再次点击select元素。至于为什么要这样做，请考虑级联ajax下拉列表。一旦用户从第一个下拉列表中选择内容，第二个下拉列表的内容就会动态加载。我有一个很大的数据集，所以它必须这样工作。发生的情况是，在从服务器加载内容之前，用户正在点击next转到第二个下拉列表。当内容最终准备好加载时，用户已经有了需要更新其值的拾取器。@Rafe我不知道这是否可以实现，但这确实会让用户体验困惑。我建议您禁用第二个选择，当用户从第一个列表中选择一个选项时，在第二个列表附近显示一个加载标签，在Ajax请求完成时启用它。IOS选择的工作方式与提示和确认do…cars.com的工作方式相同

<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);
}