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

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

您使用它就像使用“更改”事件一样。例如：

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

修改：当您点击选择新值时，Android不会将选择对焦，但它也没有与iPhone相同的问题。所以通过连接旧的change事件来修复它。

iPhone上的动态选择不起作用

1 个答案: