Как выбрать элемент из Dropdown?

Question

[D1ma5ta]

Как выбрать элемент выпадающего списка, что бы например, при выборе одного из элемента, в консоль выводилось сообщение.

<div class="dropdown">
    <div class="select">
      <span class="selected">Выбрать звук</span>
      <div class="caret"></div>
    </div>
    <ul class="menu">
      <li>Sound 1</li>
      <li>Sound 2</li>
      <li>Sound 3</li>
      <li class="active">Sound 4</li>
      <li>Sound 5</li>
    </ul>
  </div>

// Клик по кнопке. Открыть/закрыть
dropdowns.forEach(dropdown  => {
  const select = dropdown.querySelector('.select');
  const caret = dropdown.querySelector('.caret');
  const menu = dropdown.querySelector('.menu');
  const options = dropdown.querySelectorAll('.menu li');
  const selected = dropdown.querySelector('.selected');

  select.addEventListener('click', () => {
    select.classList.toggle('select-clicked');
    caret.classList.toggle('caret-rotate');
    menu.classList.toggle('menu-open');
  })


// Выбор элемента списка. Запомнить выбранное значение. Закрыть дропдаун
options.forEach(option => {
  option.addEventListener('click', (event) => {
    event.stopPropagation();
    selected.innerText = option.innerText;
    select.classList.remove('select-clicked');
    caret.classList.remove('caret-rotate');
    menu.classList.remove('menu-open');

    options.forEach(option =>  {
      option.classList.remove('active');
    });
      option.classList.add('active');
  })
})
});

Comments

[historydev]

вам нужен кастомный селект который будет вести себя аналогично обычному?

[D1ma5ta]

Владимир, у меня уже есть кастомный селект. Я не знаю как сделать что бы когда я выбираю один из пунктов, срабатывало определенное действие.

<ul class="menu">
      <li>Sound 1</li>
      <li>Sound 2</li>
      <li>Sound 3</li>
      <li class="active">Sound 4</li>
      <li>Sound 5</li>
    </ul>

Например, я выбираю Sound 1, и фон меняется на синий, выбираю Sound 2, фон меняется на зеленый

Answer 1

[historydev]

Answer 2

[mirikkingg]

document.querySelector('.menu').addEventListener('click', (event) => {
    console.log(event.currentTarget) // тут сравниваешь значение, и выводишь что надо.
})

Если я правильно понял...