iPhone上的动态选择无效 [英] Dynamic selects on iPhone not working

问题描述

我有两个选择元素。在第一个选择上做出选择将为第二个选择构建选项。适用于桌面浏览器。

I have two select elements. Making a choice on the first select will build the options for the second select. Works fine on desktop browsers.

在iPhone上，在第一个选择并选择下一步后，选项不会在第二个选择中填写。到目前为止，执行此操作的唯一方法是从第二个选择返回到上一个，然后返回下一个到第二个选择。另一种方法是点击完成，然后点击第二个选择。

On the iPhone, after you make your choice on the first one and chose "Next", the options do not get filled in the second select. So far, the only ways to do this is to go from the second select, back to the "Previous" one and then back, "Next" to the second select. The other way to click "Done" and then tap the second select.

我已经尝试过.change（）和.click（）两者都会产生相同的结果。

I've tried both .change() and .click() and both produce the same results.

下面是JS，这是一个工作示例 http ：//damonomania.com/select/

Below is the JS and here is a working example http://damonomania.com/select/

有什么建议吗？ TIA！

Any suggestions? TIA!

$(document).ready(function(){

    $('#select-1').change(function() {
        show_options();
    });

    function show_options() {
        var id = $('#select-1').val();
        $('#select-2 option:gt(0)').remove();
        $.each(options[id], function(k,v) {
            $('#select-2').append('<option value="' + k + '">' + v + '</option>');
        });
    }
});

var options = {"17":{"835":"870","836":"871"},"18":{"435":"870","436":"871"},"13":{"1":"123546"},"19":{"1213":"4010","1206":"4015"}}

推荐答案

我的网站遇到了同样的问题。我能够通过手动轮询select控件上的 selectedIndex 属性来修复它。这样，只要您检查列表中的项目，它就会触发。这是我写的一个jQuery插件：

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:

$.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
});

修改：点按选择内容时，Android无法对焦点进行选择一个新值，但它也没有与iPhone相同的问题。所以通过连接旧的更改事件来修复它。

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.

这篇关于iPhone上的动态选择无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！