我有两个选择元素。在第一个选择上做出选择将为第二个选择构建选项。在桌面浏览器上运行良好。
在 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"}}
最佳答案
我的网站也遇到了同样的问题。我可以通过手动轮询选择控件上的 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
事件来修复它。
关于jquery - iPhone 上的动态选择不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3169349/