使用iPhone Safari上的javascript事件委托处理HTML SELECT选项

We are developing a web application with GUI customized to use on iPhone. A page on the app has 3 subsequent SELECT dropdowns, where selection of an option from 1st dropdown derives the options for 2nd dropdown, and so forth. The subsequent dropdown options are populated by javascript based on onchange event on previous dropdown. The problem is that, on iPhone the options for a SELECT appears with 'prev' and 'next' links to move to previous and next control. When the 'next' link is clicked, then the control moves to next SELECT and displays the options. The javascript is triggered by onchange event for previous SELECT and populates the options for next SELECT. But on dropdown for 2nd SELECT displays the previous options before it is repopulated by the javascript. Is there a workaround or event that can sequence execution of javascript and then selection of next control? Is there any event that can be triggered when a SELECT option is selected and before control leaves the SELECT element? Is there a handle for Next and Previous links for SELECT dropdown option display?

我们正在开发一个Web应用程序,其GUI定制为可在iPhone上使用。应用程序上的页面有3个后续的SELECT下拉列表,从第1个下拉列表中选择一个选项可以获得第二个下拉列表的选项,依此类推。随后的下拉选项由javascript根据前一个下拉列表中的onchange事件填充。问题是,在iPhone上,SELECT的选项会显示“prev”和“next”链接以移至上一个和下一个控件。单击“下一个”链接时,控件将移至下一个SELECT并显示选项。 javascript由前一个SELECT的onchange事件触发,并填充下一个SELECT的选项。但是在第二个SELECT的下拉列表中显示之前的选项,然后由javascript重新填充。是否有一个解决方法或事件可以序列执行javascript然后选择下一个控件?选择SELECT选项时以及控件离开SELECT元素之前是否有任何事件可以触发? SELECT下拉选项显示的下一个和上一个链接是否有句柄?

2 个解决方案

#1

Maybe you could use the focus event, in jQuery this would be:

也许你可以使用焦点事件,在jQuery中这将是:

$('#select2').focus(function () {
    // update select2's elements
});

Although the real question is when the iPhone overload comes in, and when the event get fired. And also can the select options be changed whilst in this view.

虽然真正的问题是当iPhone重载进入时,以及事件被解雇时。此视图中也可以更改选择选项。

#2

I had the same problem on my site. I was able to fix it by manually polling the selectedIndex property on the select control. That way it fires as soon as you "check" the item in the list. Here's a jQuery plugin I wrote to do this:

我在我的网站上遇到了同样的问题。我能够通过手动轮询select控件上的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)
    });
};

You use it just like you would use the "change" event. For instance:

您可以像使用“更改”事件一样使用它。例如:

$("#mySelect1").quickChange(function() { 
    var currVal = $(this).val();
    //populate mySelect2
});

Edit: Android does not focus the select when you tap it to select a new value, but it also does not have the same problem that iphone does. So fix it by also wiring the old change event.

编辑:当您点击选择新值时,Android不会将选择对焦,但它也没有与iPhone相同的问题。因此,通过连接旧的更改事件来修复它。

#1