这很难说清楚，我是移动网络开发的新手，所以请多多包涵:
在我的网页上，我有 3 个嵌套的下拉列表(区域、城镇、街道)。
嵌套，每个下拉列表的项目在其上方的下拉列表中的选择发生变化时被修改。例如，选择区域会更改城镇和街道列表，选择城镇会更改街道 列表。
我在下拉菜单的 onchange() javascript 事件中使用 XMLHTTPRequests 来获取和填充其他下拉菜单。这在 Android 和桌面浏览器上运行良好。
在 Mobile Safari 上，当触摸下拉菜单时，会显示一个列表，用户可以在其中选择项目。此外，选择框还有“上一个/下一个/自动填充/完成”按钮，用于导航到其他表单元素。
所以用户触摸第一个下拉菜单，选择一个值并按下下一步按钮。这会导致两个问题:
首先，在此操作中，第一个下拉菜单的 oncange() 事件未可靠触发!有时会触发有时不会。
如果在选择区域后，用户触摸网页上的其他地方或按下“完成”按钮，则 onchange() 会正常触发，城镇和街道也会正常填充。
其次，按下“下一步”按钮时进入焦点的元素是下拉列表，其元素在获取后需要更改。当上一个下拉列表的 onchange() 确实被触发时，列表没有更新，或者选择框中的项目变成蓝色，并且所有项目都有一个勾号，表明它们都已被选中。
据我所知，如果我可以禁用选择框中的下一个/上一个按钮或以某种方式修复 onchange() 的触发方式并重新填充焦点下拉列表中的下一个列表项，则问题将得到解决专注。
这是代码(简化):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no" />
<title></title>
</head>
<body onload="AppStart();">
<form action="#">
Area:
<select id="ddlArea">
<option value="">-- Select Area -- </option>
<option value="1">Area 1</option>
<option value="2">Area 2</option>
<option value="3">Area 3</option>
<option value="4">Area 4</option>
<option value="5">Area 5</option>
</select>
<br />
Town:
<select id="ddlTown">
<option value="">Please wait ...</option>
</select>
<br />
Street:
<select id="ddlStreet">
<option value="">-- Select Area or Town -- </option>
</select>
<br />
Unit:
<select id="ddlUnit">
<option value="">-- No Street Selected -- </option>
</select>
<script type="text/javascript">
var ddlArea, ddlTown, ddlStreet, ddlUnit;
function AppStart() {
ddlArea = document.getElementById("ddlArea");
ddlTown = document.getElementById("ddlTown");
ddlStreet = document.getElementById("ddlStreet");
ddlUnit = document.getElementById("ddlUnit");
ddlArea.onchange = areaChanged;
ddlTown.onchange = townChanged;
ddlStreet.onchange = streetChanged;
setTimeout(function() { updateTown(""); }, 250);
}
var areaId = "", townId = "", streetId = "", unitId = "";
function areaChanged(e) {
areaId = ddlArea.options[ddlArea.selectedIndex].value
ddlClear(ddlTown, createOption("Please Wait...", ""));
ddlClear(ddlStreet, createOption("Please Wait...", ""));
ddlClear(ddlUnit, createOption("-- No Street Selected --", ""));
setTimeout(function() { updateTown(areaId); }, 500);
setTimeout(function() { updateStreet(areaId, ""); }, 700);
}
function townChanged(e) {
townId = ddlTown.options[ddlTown.selectedIndex].value
ddlClear(ddlStreet, createOption("Please Wait...", ""));
ddlClear(ddlUnit, createOption("-- No Street Selected --", ""));
setTimeout(function() { updateStreet(areaId, townId); }, 400);
}
function streetChanged(e) {
streetId = ddlStreet.options[ddlStreet.selectedIndex].value
ddlClear(ddlUnit, createOption("Please Wait...", ""));
setTimeout(function() { updateUnit(streetId); }, 600);
}
function updateTown(areaID) {
ddlClear(ddlTown, createOption("-- Select Town --", ""));
var items = isNaN(parseInt(areaID)) ? 10 : parseInt(areaID);
if (areaID == "") areaID = "ALL";
for (var i = 0; i < items; i++) {
ddlTown.appendChild(createOption("Town " + (i+1) + ", Area " + areaID, i));
}
}
function updateStreet(areaID, townID) {
ddlClear(ddlStreet, createOption("-- Select Street --", ""));
var items1 = isNaN(parseInt(areaID)) ? 10 : parseInt(areaID);
var items2 = isNaN(parseInt(townID)) ? 10 : parseInt(townID);
var items = items1 + items2;
if (areaID == "") areaID = "ALL";
if (townID = "") townId = "ALL";
for (var i = 0; i < items; i++) {
ddlStreet.appendChild(createOption("Street " + (i + 1) + ", Area " + areaID + ", Town " + townID, i));
}
}
function updateUnit(streetID) {
ddlClear(ddlUnit, createOption("-- Select Unit --", ""));
var items = isNaN(parseInt(streetID)) ? 10 : parseInt(streetID);
if (streetID == "") streetID = "ALL";
for (var i = 0; i < items; i++) {
ddlUnit.appendChild(createOption("Unit " + (i + 1) + ", Street " + streetID, i));
}
}
function ddlClear(Dropdown, option) {
while (Dropdown.options.length > 0) {
try { Dropdown.options[0] = null; } catch (e) { };
}
if (option != null) {
Dropdown.appendChild(option);
}
}
function createOption(text, value) {
var oOption = document.createElement("OPTION");
oOption.innerHTML = text;
oOption.value = value;
return oOption;
}
</script>
</form>
</body>
</html>
帮助。 :/
最佳答案
我的网站也遇到了同样的问题。我能够通过手动轮询选择控件上的 selectedIndex 属性来修复它。这样，只要您“检查”列表中的项目，它就会触发。这是我为此编写的 jQuery 插件:
$.fn.quickChange = function(handler) {
return this.each(function() {
var self = this;
self.qcindex = self.selectedIndex;
var interval;
function handleChange() {
if (self.selectedIndex != self.qcindex) {
self.qcindex = self.selectedIndex;
handler.apply(self);
}
}
$(self).focus(function() {
interval = setInterval(handleChange, 100);
}).blur(function() { window.clearInterval(interval); })
.change(handleChange); //also wire the change event in case the interval technique isn't supported (chrome on android)
});
};
您可以像使用“更改”事件一样使用它。例如:
$("#mySelect1").quickChange(function() {
var currVal = $(this).val();
//populate mySelect2
});
编辑:当您点击它以选择新值时，Android 不会聚焦选择，但它也没有与 iphone 相同的问题。因此，通过连接旧的 change 事件来修复它。
关于javascript - 在 Mobile Safari 下拉列表项选择框上使用 'Next' 时选择/下拉的 onchange() JS 事件的奇怪行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5960731/