iPhone上的动态选择无效

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

在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('' + v + ''); }); } }); 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事件来修复它。