Странное поведение select/dropdown onchange() JS-событие при использовании флажка "Следующий" в раскрывающемся списке выбора Safari для мобильных устройств Safari

Это сложно сформулировать, и я новичок в разработке мобильных веб-сайтов, поэтому, пожалуйста, несите меня:

На моей веб-странице У меня есть 3 вложенных выпадающих списка (Area, Town, Street).

Вложенный, как и в, каждый выпадающий элемент изменяется, когда выбор в раскрывающемся списке над ним изменяется. например, при выборе области "Изменить город" и "Улица" и "Город" изменяет список "Улица".

Я использую XMLHTTPRequests в событии onchange() javascript выпадающих списков, чтобы извлекать и заполнять другие вниз. Это отлично работает в браузерах Android и Desktop.

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

Справка.:/

Ответ 1