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

Question

[Rustam Bainazarov]

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

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

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

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


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

Answer 1

[0xD34F]

$('.s-mobile-filter-type-select__select').on('change', function() {
  $(this)
    .closest('.s-mobile-filter-type-select')
    .find('.s-mobile-filter-type-select__selected-options-list-content')
    .text($('option:selected', this).get().map(n => $(n).text()).join(', '));
});

Comments

[Rustam Bainazarov]

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

Спасибо!

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

[0xD34F]

Рустам Байназаров, без понятия. Мобильной разработкой никогда ни в каком виде не занимался.

[Rustam Bainazarov]

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