Есть несколько select со скриптом на изменение соседних элементов. Как сделать чтобы скрипт отрабатывал внутри того блока, в котором изменили select?

Question

[rasimzes]

Необходимо чтобы изменения заголовка и цены происходили только в том блоке в котором был изменен select.
Codepen

Answer 1

[0xD34F]

const containerSelector = '.card';
const selectSelector = `${containerSelector} select`;
const dataAttr = 'name';

$(selectSelector).change(function() {
  $(this)
    .closest(containerSelector)
    .find(`[data-${dataAttr}]`)
    .hide()
    .filter(`[data-${dataAttr}="${this.value}"]`)
    .show();
}).val(defaultValueSelected).trigger('change');

// или

const selects = document.querySelectorAll(selectSelector);
const onChange = ({ target: t }) => t
  .closest(containerSelector)
  .querySelectorAll(`[data-${dataAttr}]`)
  .forEach(n => n.style.display = t.value === n.dataset[dataAttr] ? 'block' : 'none');

selects.forEach(n => {
  n.value = defaultValueSelected;
  n.addEventListener('change', onChange);
  n.dispatchEvent(new Event('change'));
});

Comments

[rasimzes]

Спасибо!

Answer 2

[profesor08]

Выбираешь блоки, в блоке выбираешь селект, навешиваешь на него обработчики.