Параметры выбора фильтрации jQuery не работают в Safari (но работают в Chrome и FF)
У меня есть форма с несколькими раскрывающимися списками, и первый выбранный раскрывающийся список будет служить для фильтрации вариантов второго раскрывающегося списка (для их ограничения). Следующий код отлично работает в 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.info(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 не фильтрует параметры во втором раскрывающемся списке (он просто показывает все параметры)
Я попытался клонировать (динамический) раскрывающийся список, а затем выполнить фильтрацию (используя remove для ненужных параметров), но по какой-то причине попытка показать только что клонированный раскрывающийся список не удается (хотя я могу зарегистрировать его и увидеть, что он отфильтрован правильно)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если вы собираетесь использовать .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
};
Это потому, что скрытие
<option>не поддерживается кросс-браузером. IE и Safari его не поддерживают. Возможные варианты: отключить / включить или удалить / заменить. Или используйте сценарий замены<select>с функцией фильтрации