Состояния тэга select?

Question

[Илья Филонов]

Добрый день.

В стандартном коде Opencart фильтр срабатывает по нажатию кнопки "Поиск". Вот ее код:

$('.filter-item').on('click', function() {
	filter = [];
	$('input[name^=\'filter\']:checked').each(function(element) {
		filter.push(this.value);
	});
	location = '{{ action }}&filter=' + filter.join(',');
});

Все дело в том, что стандартный фильтр реализован через input:checkbox. В моем шаблоне фильтр сделан через select.
Как поменять эту строчку ('input[name^=\'filter\']:checked'), чтобы фильтр срабатывал, как только пользователь выбирает один из тэгов option внутри select? Ведь у него нет состояния checked, как у checkbox

Answer 1

[Dima Polos]

Да, но есть свойства selectedIndex и selectedOption.
Еще есть событие у всех элементов форм: 'change', срабатывает когда с полем ввода было взаимодействие, был потерян фокус и изменились данные - на него можно подписаться и читать свойства у e.target.selectedOption, e.target.selectedIndex...

Comments

[Илья Филонов]

Простите, не допераю.

Сейчас селект не обернут в форму. Тогда оборачиваю его в form и в js пишу, ('option[name^=\'filter\']:change')?

[Dima Polos]

Илья Филонов, нет, не надо его оборачивать, надо вот так, раз у Вас jquery:

$('select[name=\'filter\']').on('change', function(e){
  let $target= $(e.target);
  let selectedItem = $target.prop('selectedIndex');
  let selectedOption = $target.prop('selectedOption');
// тут уже что-то с этими данными делайте, selectedIndex вернет порядковый номер выбранной опции, а selectedOption вернет, посмотрите в консоль, то ли ее value, то ли ее текст
});