jquery - iPhone 上的动态选择不起作用

Question

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

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

我尝试了 .change() 和 .click()，并且都产生了相同的结果。

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

有什么建议吗？ 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"}}

Answer 1

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

编辑:当您点击选择新值时，Android 不会聚焦选择，但它也不会出现与 iPhone 相同的问题。因此，还可以通过连接旧的 change 事件来修复它。