Javascript jQuery筛选选择选项在Safari中不起作用（但在Chrome和FF中起作用）

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

---

奇怪的是，当我在控制台上记录

vallie

或

sub

或

jQuery（this.val（）.indexOf（vallie）

返回的值时，它们在所有浏览器中都是相同的。为什么Safari不在第二个下拉列表中过滤选项（它只显示所有选项）

如果要使用

.filter

，则应返回一个布尔值，指示是否包含当前项，而不是使用

.show（）

和

.hide（）

---

否则，请使用

.each

或

.map

感谢@charlietfl提醒我隐藏选项不受普遍支持。以下是我最终采用的解决方案：

我将我的选项分离为单独的js对象

然后我检查第一个下拉列表中的值，并使用该值获得正确的菜单对象

然后清空现有（完整）菜单，然后从适当的对象附加选项

以下是实际代码：

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 
  };

if（~jQuery（this.attr（'id'）.indexOf（'5B0AD3559224'）&&~jQuery（this.attr（'id'）.indexOf（jQuery（this.closest（'tr'）.attr（'data-id'）））{
var vallie=jQuery（this.val（）；
var thismenu=menu\u portes；//设置默认菜单对象
如果（vallie=='Tiroir'）{thismenu=menu\u tiroirs}其他如果（vallie=='Côté'）{thismenu=menu\u cotes}
var$sub=jQuery（'[id*=“'+jQuery（this）.closest（'tr'）.attr（'data-id'）+'-field_5b0ad39f92225“]）；
$sub.empty（）；//删除旧选项
$sub.append（jQuery（“”，{value:'Choisir'，text:'Choisir'}））；//在顶部添加Choisir
each（thismenu，function（key，value）{//循环遍历我的对象选项
$sub.append（jQuery（“”.attr（“value”，key）.text（value））；//从我的菜单对象追加选项
});
jQuery（$sub.val（'Choisir'）；//将菜单设置为Choisir
};

这是因为跨浏览器不支持隐藏

。IE和Safari不支持它。选项为禁用/启用或删除/替换。或者使用具有筛选功能的

替换脚本我已尝试克隆（动态）下拉列表，然后进行筛选（对不需要的选项使用删除），但由于某些原因，尝试显示新克隆的下拉列表失败（即使我可以记录并查看它是否已正确筛选）

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 
  };