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

Question

[Andy Koshman]

Всем привет, каким образом можно вывести из всех имеющихся 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)
  }
})

Answer 1

[Чипекве]

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);
  });  
})

Comments

[Andy Koshman]

Спасибо, а если мне нужно сформировать объект:

let data = {
    type: type,
    amount: amount,
  }

Как можно это реализовать? По сути должно получиться как то так:

data = {
  type: "one",
  amount: 1
}, {
  type: "two",
  amount: 3
}

[Чипекве]

const parentBlock = document.querySelector('.parent-block');

parentBlock.addEventListener('click', ({ target }) => {
    if (!target.classList.contains('btn')) return;

    const selectBlocksArr = [...document.querySelectorAll('.block')];

    const selectedData = selectBlocksArr.map(selectBlock => {
        const typeSelect = selectBlock.querySelector('.type');
        const amountSelect = selectBlock.querySelector('.amount');

        const getSelectedOptionText = (select) => select.options[select.selectedIndex].textContent;

        return {
            type: getSelectedOptionText(typeSelect),
            amount: getSelectedOptionText(amountSelect)
        }
    });

    console.log(selectedData);
})