jQuery过滤选择选项在Safari中不起作用(但在Chrome和FF中有效)

Question

>我有一个带有一些下拉列表的表单，第一个选定的下拉列表将用于过滤第二个下拉列表的选择(以限制它们(。以下代码在FF和Chrome中运行良好，但在Safari(至少版本11.1.2(中不起作用：

if(~jQuery(this).attr('id').indexOf('5b0ad35592224') && ~jQuery(this).attr('id').indexOf(jQuery(this).closest('tr').attr('data-id'))) {
var vallie = jQuery(this).val();
var sub = jQuery('[id*="'+jQuery(this).closest('tr').attr('data-id')+'-field_5b0ad39f92225"]');
console.log(sub);
jQuery('option', sub).filter(function(){
if (~jQuery(this).val().indexOf(vallie) || jQuery(this).val() === 'Choisir') {
jQuery(this).show();
} else {
jQuery(this).hide();
}
});
jQuery(sub).val('Choisir');  
};

奇怪的是，当我控制台记录为vallie或sub或jQuery(this).val().indexOf(vallie)返回的值时，它们在所有浏览器中都是相同的。我很困惑为什么 Safari 不过滤第二个下拉列表中的选项(它只显示所有选项(

Answer 1

如果你打算使用.filter，你应该返回一个布尔值，指示是否包含当前项目，而不是使用.show()和.hide()文档

否则，请使用.each或.map

Answer 2

感谢@charlietfl提醒我隐藏选项并非普遍支持的事实。这是我最终采用的解决方案：

1. 我将我的选项分成单独的 js 对象
2. 然后，我检查第一个下拉列表中的值，并使用它来获取正确的菜单对象
然后，
3. 我清空现有(完整(菜单，然后附加相应对象的选项。

这是实际代码：

if(~jQuery(this).attr('id').indexOf('5b0ad35592224') && ~jQuery(this).attr('id').indexOf(jQuery(this).closest('tr').attr('data-id'))) {
var vallie = jQuery(this).val();
var thismenu = menu_portes; // set default menu object
if (vallie === 'Tiroir') {thismenu = menu_tiroirs } else if (vallie === 'Côté') {thismenu = menu_cotes }
var $sub = jQuery('[id*="'+jQuery(this).closest('tr').attr('data-id')+'-field_5b0ad39f92225"]');
$sub.empty(); // remove old options
$sub.append(jQuery('<option>', { value: 'Choisir', text: 'Choisir'})); // add Choisir at top
jQuery.each(thismenu, function(key,value) { // loop through my object options
$sub.append(jQuery("<option></option>").attr("value", key).text(value)); //append options from my menu object
});
jQuery($sub).val('Choisir'); // set menu to Choisir 
};