移动软键盘未通过 Ajax 填充的下拉列表更新(使用箭头时)

Question

我有两个选择字段，国家和城市：

<select id="country" onchange="getCity(this);">
<option value="">-- Please select your country --</option>
<option value="1">Austria</option>
<option value="2">Switzerland</option>
</select>
<select name="city" id="selectFormCity" onchange="setCity(this);">
<option value="none">-- Please select --</option>
</select>

选择国家/地区时，将通过 Ajax 填充城市下拉列表

<script type="text/javascript">
document.getElementById("country").onchange()
function getCity(elem) {
var v = elem.options[elem.selectedIndex].value;
new Ajax.Request('https://example.com/registration/index/getCity/', {
parameters: {
id: v},
method:'get',
onSuccess: function(transport) {
var response = transport.responseText;
$("selectFormCity").innerHTML(response);
}
});
}
</script>

这在桌面上完美运行。我已经在Chrome模拟器中测试了各种浏览器和设备。

但是当我在真正的手机(例如IOS)上运行它时，我在软键盘中遇到了以下问题：

当我单击国家/地区下拉列表时，将显示移动软键盘，我可以滚动浏览国家/地区。当我没有通过按"完成"按钮关闭键盘，而是想使用"箭头"跳转到下一个表单时，城市下拉列表一直保持为空(尽管它是通过 Ajax 更新的)。只要键盘保持打开状态，它就不会填充新数据。

问题

1. 有谁知道如何在使用导航箭头时"刷新"第二个下拉列表？不合键盘？

2. 或者有谁知道如何隐藏箭头以在表单中导航？

任何帮助都非常感谢。谢谢！

编辑

这似乎是一个常见问题：

例 1

例 2

Answer 1

您可以通过将选择设置为readonly="true"来禁止同时打开键盘。 您还可以尝试在onchange()函数中将焦点设置在文档上。这应该关闭键盘。