javascript - Strange behavior of select/dropdown's onchange() JS event when using 'Next' on Mobile Safari Dropdown list item select box -
this hard 1 articulate , new mobile web development please bear me:
on webpage, have 3 nested dropdown lists (area, town, street).
nested in, each dropdown's items modified when selection in dropdown above changes. e.g selecting area changes town , street lists , selecting town changes street list.
i use xmlhttprequests in onchange() javascript event of dropdowns fetch , populate other downdowns. works fine on android , desktop browsers.
on mobile safari, when drowdown touched, list shown user can select items. in addition selection box has "previous/next/autofill/done" buttons navigate other form elements.
so user touches first dropdown, selects value , presses next button. causes 2 problems:
first, on action first dropdown's oncange() event not triggered reliably! fires not.
if after selecting area, user touches somewhere else on webpage or presses "done" button onchange() fired , towns , streets populated normally.
second, element comes focus when pressing "next" button dropdown whos elements need changed after being fetched. when onchange() of previous dropdown fired then, either list no updated or items in select box turn blue , of them have tick mark showing selected..
from can tell problem solved if can disable next/previous buttons in selection box or somehow fix how onchange() fired , next in focus dropdown's list items repopulated while in focus.
here code (simplified):
<!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"; (var = 0; < 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"; (var = 0; < 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"; (var = 0; < 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> help. :/
i had same problem on site. able fix manually polling selectedindex property on select control. way fires "check" item in list. here's jquery plugin wrote this:
$.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 change event in case interval technique isn't supported (chrome on android) }); }; you use use "change" event. instance:
$("#myselect1").quickchange(function() { var currval = $(this).val(); //populate myselect2 }); edit: android not focus select when tap select new value, not have same problem iphone does. fix wiring old change event.
Comments
Post a Comment