Как произвести динамическое копирование/удаления текста выбранных option из multiple select в div в случае, если их несколько?

Question

[Rustam Bainazarov]

Здравствуйте!

К сожалению, я очень хреновый знаток JS, возникла необходимость динамического копирования текста выбранных option из select'ов в div. Я написал косой код... и все бы работало хорошо, но проблема моего подхода заключается в том, что я создаю один и тот же массив для всех select'ов, из-за чего контент во всех фильтрах копируется одинаковый.

Я понимаю, что я хреновый разработчик. Я понимаю, что нативный multiple select на ПК не очень удобен, но эти фильтры предназначаются для мобильных, поэтому select'ы на телефонах я буду скрывать визуально и абсолютно позиционировать, чтобы они были доступны по клику на блок. Появляется нативное окно выбора опций, что на телефонах вполне удобно.

Для понимания происходящего в примере я визуально показываю эти select'ы.
Покликайте в примере по опциям нескольких фильтров— вы сразу поймете проблему (в блок справа от названия копируются все выбранные опции по всем фильтрам):


P. S. В реальном проекте все остальные алгоритмы (очищение выбранного фильтра, сброс и AJAX-подгрузка кол-ва товаров уже работают, кроме вот этой визуальной штуки.

Answer 1

[0xD34F]

const filterSelector = '.s-mobile-filter-type-select';
const selectSelector = '.s-mobile-filter-type-select__select';
const selectedSelector = '.s-mobile-filter-type-select__selected-options-list-content';

Вот jquery:

$(selectSelector).on('change', function() {
  $(this)
    .closest(filterSelector)
    .find(selectedSelector)
    .text($('option:selected', this).get().map(n => $(n).text()).join(', '));
});

А вот jquery катится к чёрту:

const updateSelected = select => select
  .closest(filterSelector)
  .querySelector(selectedSelector)
  .textContent = Array
    .from(select.selectedOptions, n => n.text)
    .join(', ');


// можно назначить обработчик события каждому select'у индивидуально
document.querySelectorAll(selectSelector).forEach(function(n) {
  n.addEventListener('change', this);
}, e => updateSelected(e.target));

// или, применяем делегирование
document.addEventListener('change', ({ target: t }) => {
  if (t.matches(selectSelector)) {
    updateSelected(t);
  }
});

Comments

[Rustam Bainazarov]

Ай да красота, ай да пипец!

Спасибо!

Подскажи, пожалуйста, есть ли смысл перевода этого скрипта на Vanilla JS ради производительности? Остальную часть как-то мне удалось добить на Vanilla. Фильтров просто может быть достаточно много (до ~70 на странице), поэтому производительность хотелось бы максимально сохранить с учетом мобильных, хоть ничего сверхъестественного в этих фильтрах не будет.

[0xD34F]

Без понятия. Мобильной разработкой никогда ни в каком виде не занимался. Ответ переписал - добавил вариант на чистом js.

[Rustam Bainazarov]

0xD34F, понял, ещё раз спасибо!