jQuery 过滤选择选项在 Safari 中不起作用（但在 Chrome 和 FF 中起作用）答案

【问题标题】：jQuery filtering select options does not work in Safari (but works in Chrome and FF)jQuery 过滤选择选项在 Safari 中不起作用（但在 Chrome 和 FF 中起作用）
【发布时间】：2018-08-29 22:20:09
【问题描述】：

我有一个带有一些下拉列表的表单，第一个选择的下拉列表将用于过滤第二个下拉列表的选择（以限制它们）。以下代码在 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 不过滤第二个下拉列表中的选项（它只显示所有选项）

【问题讨论】：

这是因为不支持跨浏览器隐藏<option>。 IE 和 Safari 不支持。选项是禁用/启用或删除/替换。或者使用具有过滤功能的<select> 替换脚本
我已尝试克隆（动态）下拉列表，然后进行过滤（对不需要的选项使用 remove），但由于某种原因，尝试显示新克隆的下拉列表失败（即使我可以记录它并看到它已正确过滤）

标签： javascript jquery safari

【解决方案1】：

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

否则，请使用.each 或.map

【讨论】：

【解决方案2】：

感谢@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 
  };

【讨论】：