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

Спасибо @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 
  };

Answer 2

Если вы собираетесь использовать .filter, вам следует вернуть логическое значение, указывающее, следует ли включать текущий элемент вместо использования .show() и .hide() документации

В противном случае используйте .each или .map