Chupachar
@Chupachar
front-end dev

Как вывести в консоль text и value всех имеющихся option на странице?

Всем привет, каким образом можно вывести из всех имеющихся option text и value? В моем случае текущие данные выводятся только из первого <div class="block"></div>
И как быть в случае, если block будут добавляться динамически?
https://jsfiddle.net/48v7fug5/5/

<div class="parent-block">
  <div class="block">
    <select name="" id="" class="select type">
      <option value="" disabled selected>type</option>
      <option value="">one</option>
      <option value="">two</option>
      <option value="">three</option>
    </select>
    <select name="" id="" class="select amount">
    <opiton  disabled selected>amount</opiton>
      <option value="">1</option>
      <option value="">2</option>
      <option value="">3</option>
    </select>
  </div>
  <div class="block">
    <select name="" id="" class="select type">
      <option value="" disabled selected>type</option>
      <option value="">four</option>
      <option value="">five</option>
      <option value="">six</option>
    </select>
    <select name="" id="" class="select amount">
    <opiton  disabled selected>amount</opiton>
      <option value="">1</option>
      <option value="">2</option>
      <option value="">3</option>
    </select>
  </div>
  <button class="btn">push</button>
</div>


let parentBlock = document.querySelector('.parent-block')
let select = document.querySelectorAll('.select')

parentBlock.addEventListener('click', function(e) {
  let parent = e.target.closest('.parent-block')
  let selType = parent.querySelector('.type')
  let selAmount = parent.querySelector('.amount')
  let type = selType.options[selType.selectedIndex].text
  let amount = selAmount.options[selAmount.selectedIndex].text
  let data = {
    type: type,
    amount: amount,
  }
  if (e.target.classList.contains('btn')) {
    console.log(data.type)
    console.log(data.amount)
  }
})
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
XanXanXan
@XanXanXan
const parentBlock = document.querySelector('.parent-block');

parentBlock.addEventListener('click', ({target}) => {
  if (!target.classList.contains('btn')) return;
  
  const allPageSelects = document.querySelectorAll('select');
  allPageSelects.forEach(select => {
    console.log(select.options[select.selectedIndex].textContent);
  });  
})
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы