iPhone上的动态选择不起作用

Question

我有两个select元素。在第一个select上进行选择将为第二个select构建选项。在桌面浏览器上运行良好。

在iPhone上，在第一个选项上做出选择并选择"Next“后，选项不会在第二个select选项中填写。到目前为止，唯一的方法是从第二个select开始，回到“上一个”select，然后返回"Next“到第二个select。另一种方法是单击“完成”，然后点击第二个选择。

我已经尝试了.change()和.click()，它们都产生了相同的结果。

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

有什么建议吗？蒂娅！

$(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"}}

Answer 1

我在我的网站上也遇到了同样的问题。我可以通过手动轮询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)
    });
};

您可以像使用"change“事件一样使用它。例如：

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

编辑：当你点击它来选择一个新的值时，安卓不会聚焦于选择，但它也不存在与iphone相同的问题。因此，通过连接旧的change事件来修复它。