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()和.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 
  };