force 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

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

但是，如果值在用户选择下拉列表时发生更改，则可以使用JavaScript选择其他元素，然后重新选择下拉列表，使其重新加载。

您可以使用focus（）方法将焦点置于元素上。例如。     的document.getElementById（ “输入”）聚焦（）;

Answer 3

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

1. 我的下拉列表只包含一个option：Searching...。
2. 当用户点击时，＆＃34;选择器＆＃34;弹出（＆＃34;勾选列表＆＃34;在iPad上，与＃34; spinner＆＃34;在iPhone上的原理相同），显示Searching...。
3. AJAX调用会从服务器中获得选择，JavaScript会将options[]更新为这些。
4. 此时，选择器仍显示Searching...，并且用户不知道它已被重新填充。用户必须点击外面才会关闭＆＃34;选择器＆＃34;，然后再次点击下拉菜单以查看新选项。

所以在我的情况下，根据在第一个下拉列表中选择的选项，我没有OP想要显示第二个下拉列表的情况。相反，我希望（＃1）＆＃34;选择器＆＃34;消失，然后（＃2）重新出现（使用新的选择）。

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

1. 你可以解雇＆＃34;选择器＆＃34;按dropdown.blur()（在Mobile Safari中测试）。见Close a SELECT dropdown list programatically with Javascript/jQuery。
2. 您无法导致＆＃34;选择器＆＃34;再次弹出（至少不在Mobile Safari中）。见How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?。

所以我至少做＃1，这样用户就可以得到一些反馈，而不仅仅是被Searching...困住。

如果有人能说出如何在Mobile Safari上做＃2，我会非常有兴趣听到....

Answer 4

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

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

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

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

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