Comportement étrange de l'événement JS onchange () de select / dropdown lors de l'utilisation de 'Next' dans la boîte de sélection de l'élément de liste déroulante Mobile Safari Dropdown

C'est un dur à articuler et je suis nouvelle dans le développement web mobile, de sorte s'il vous plaît garder avec moi:

Sur ma page web, j'ai 3 Imbriquée des listes déroulantes (Région, Ville, Rue).

Imbriqués comme dans chaque liste déroulante d'éléments sont modifiés lors de la sélection dans la liste déroulante ci-dessus, il change. e.g la sélection d'un Zone changements de la Ville et Rue des listes et de la sélection d'un Ville changements de la Rue liste.

- Je utiliser XMLHTTPRequests dans le onchange() de javascript cas de listes déroulantes à récupérer et remplir les autres downdowns. Cela fonctionne bien sur Android et les navigateurs de Bureau.

Sur Mobile Safarilorsqu'un drowdown est touché, une liste s'affiche lorsque l'utilisateur peut sélectionner des éléments. En outre, la boîte de sélection a le "Précédent/Suivant/remplissage automatique/Done" pour accéder à d'autres éléments de formulaire.

De sorte que l'utilisateur touche la première liste déroulante, sélectionner une valeur et appuie sur le bouton Suivant. Cela pose deux problèmes:

PremièreSur cette action de la première liste déroulante de oncange() événement n'est pas déclenché de manière fiable! Parfois, il déclenche parfois pas.

Si après avoir sélectionné une Zone, l'utilisateur touche quelque part ailleurs sur la page web, ou appuie sur le bouton "Terminé" puis le onchange() est lancé normalement, les Villes et les Rues sont peuplées normalement.

Deuxièmel'élément qui est au point lorsque vous appuyez sur puis sur "Next" bouton de la liste déroulante whos éléments doivent être modifiés après être récupérées. Lorsque le onchange() du menu déroulant ne me faire virer de là, la liste n'est pas à jour ou les éléments dans la boîte de sélection colorée en bleu et tous ont un signe montrant qu'ils sont tous sélectionnés..

De ce que je peux dire que le problème serait résolu si je peux désactiver les boutons Précédent/Suivant dans la boîte de sélection ou de fixer en quelque façon le onchange() est déclenché et le prochain focus déroulant de la liste des éléments sont remplis à nouveau alors qu'il est au point.

Voici le code (simplifié):

<!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>

De l'aide. :/

source d'informationauteur Vaibhav Garg