Странное поведение события JS onchange () для выбора / раскрывающегося списка при использовании кнопки «Далее» в поле выбора элемента раскрывающегося списка Mobile Safari
Это сложно сформулировать, и я новичок в мобильной веб-разработке, поэтому, пожалуйста, не теряйте меня:
На моей веб-странице, у меня есть 3 вложенных раскрывающихся списка ( Площадь, город, улица).
Вложенные, как в, элементы каждого раскрывающегося списка изменяются при изменении выбора в раскрывающемся списке над ним. е. g выбор области изменяет списки Город и Улица , а выбор Город изменяет список Улица ]. 12176] Я использую XMLHTTPRequests в javascript-событии onchange () раскрывающихся списков для получения и заполнения других раскрывающихся списков. Это отлично работает в браузерах Android и настольных ПК.
В Mobile Safari при нажатии на раскрывающееся меню отображается список, в котором пользователь может выбирать элементы. Кроме того, в поле выбора есть кнопки «Назад / Далее / Автозаполнение / Готово» для перехода к другим элементам формы.
Таким образом, пользователь касается первого раскрывающегося списка, выбирает значение и нажимает кнопку «Далее». Это вызывает две проблемы:
Первая , при этом действии событие oncange () первого раскрывающегося списка не запускается надежно! Иногда срабатывает, иногда нет.
Если после выбора области пользователь касается другого места на веб-странице или нажимает кнопку «Готово», то onchange () запускается нормально, а города и улицы заполняются нормально.
Во-вторых , Элемент, который попадает в фокус при нажатии кнопки «Далее», представляет собой раскрывающийся список, элементы которого необходимо изменить после получения. Когда onchange () в предыдущем раскрывающемся списке действительно запускается, либо список не обновляется, либо элементы в поле выбора становятся синими, и все они имеют отметку, показывающую, что все они выбраны.
Из чего Я могу сказать, что проблема будет решена, если я смогу отключить кнопки Next / Previous в поле выбора или как-то исправить, как запускается 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>
Справка. : /