跳转到下一个下拉菜单时，jQuery 级联下拉菜单在 iPhone 上不起作用
<p><p>我的级联下拉菜单在桌面浏览器和 iPad 上运行良好，但我真的只需要它在 iOS 7 和 Android 上的 iPhone 上运行。问题出在 iPhone 上。如果我使用 > 按钮导航到下一个下拉列表，则在第一个下拉列表中选择一个选项后，它会在 ajax 调用完成之前切换，因此我的下拉列表要么为空，要么仍保留先前的选择。如果我点击完成，模糊事件就足以让它工作。</p>
<p>这是最简单的全功能示例:</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Cascading dropdowns" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<title>Cascade</title>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header" class="jqm-header">
<h1>Cascade</h1>
</div>
<div data-role="content" >
<div data-role="fieldcontain">
<select name="agency" id="agency" >
<option value="actransit">AC Transit</option>
<option value="emery">Emeryville</option>
<option value="sf-muni">MUNI</option>
</select>
<select name="selectRoute" id="selectRoute"></select>
</div>
</div>
</div>
<script>
var nextBus = "http://webservices.nextbus.com/service/publicXMLFeed?";
function updateRoutes(agency) {
$.ajax({
type: "GET",
url: nextBus + "command=routeList&a=" + agency,
dataType: "xml",
success: function(xml) {
$("#selectRoute").children().remove();
$(xml).find('route').each(function(){
var tag = $(this).attr('tag');
var title = $(this).attr('title');
$('<option value="' + tag + '">' + title+ '</option>').appendTo("#selectRoute");
});
$("#selectRoute").selectmenu('refresh');
}
});
}
$().ready(function(){
$("#agency").blur (function (event)
{
var agency = $("#agency").val();
updateRoutes(agency);
});
});
</script>
</body>
</html>
</code></pre>
<p>在某些浏览器上，可以通过按 Tab 键来模拟 > 按钮。我尝试添加它以延迟焦点更改，直到 ajax 完成:</p>
<pre><code> $("#selectAgency").keypress (function(e) {
if (e.keyCode == 9) {
tabHappened = true;
updateRoutes($("#selectAgency").val());
e.preventDefault();
}
}
});
</code></pre>
<p>然后在填充下一个下拉列表后，调用:</p>
<pre><code> if (tabHappened) {
tabHappened = false;
$("#selectRoute").focus();
}
</code></pre>
<p>但是我尝试过的 keypress、keydown 和其他几个似乎都没有触发，或者还有其他事情发生。我没有办法监控 iPhone 的 safari 浏览器上发生了哪些事件。我很欣赏任何让 iPhone 上的快速导航按钮与此配合使用的见解。提前感谢您抽出宝贵时间查看此内容。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>对您的 ajax 使用 async=false 将阻止所有后续事件触发，直到它完成。见 <a href="https://stackoverflow.com/questions/1478295/what-does-async-false-do-in-jquery-ajax" rel="noreferrer noopener nofollow">What does "async: false" do in jQuery.ajax()?</a> </p></p>
<p style="font-size: 20px;">关于跳转到下一个下拉菜单时，jQuery 级联下拉菜单在 iPhone 上不起作用，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/20626539/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/20626539/
</a>
</p>
页:
[1]