8

当您使用 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);
}
4

4 回答 4

3

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

所以总而言之，你试图实现的东西是不可能的。您应该寻找其他方法来使您的数据集可访问。

于 2013-08-29T08:00:42.843 回答
1

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

  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 中测试）关闭“选择器” 。请参阅使用 Javascript/jQuery 以编程方式关闭 SELECT 下拉列表。
  2. 您不能让“选择器”再次弹出（至少在 Mobile Safari 中不会）。请参阅如何以编程方式告诉 HTML SELECT 下拉（例如，由于鼠标悬停）？.

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

如果有人可以说明您如何在 Mobile Safari 上执行 #2，我将非常有兴趣听到......

于 2016-10-14T13:07:03.833 回答
0

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

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

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

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

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

于 2019-09-19T02:22:09.877 回答
-1

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

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

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

于 2013-08-23T09:45:22.780 回答