javascript - Adding event listener to multiple select elements in js

Question

I have different select elements for changing the size of different products, each size has a different price. I can do it with one select element using querySelector but it won't work with querySelectorAll.

Here's my code for changing only one select element:

const price = document.querySelector(".price");
const select = document.querySelector(".select");

select.addEventListener("change", () => {
  price.innerText = select.options[select.selectedIndex].value;
});

<div>
  <p class="price">$15</p>
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="$20">40cmx40cm</option>
    <option value="$30">30cmx40cm</option>
    <option value="$50">50cmx50cm</option>
  </select>
</div>

question from:https://stackoverflow.com/questions/65902143/adding-event-listener-to-multiple-select-elements-in-js

Answer 1

You can accomplish this by using "event delegation" where you set up just one handler on an element that is a common ancestor to all the select elements you wish to handle events on. The event will originate at the select but not be handled there and will "bubble" up to the ancestor you choose. Then you handle the event at that ancestor and use the event.target that will be accessible in the handler to reference the actual element that triggered the event and relative DOM references to reference the p element you need to update.

The benefit here is that you only set up one handler (which saves on memory and performance) and the code is simplified. Also, you can add new select structures without having to alter the handling code at all.

// Set up a single handler at a common ancestor of all the select elements
document.body.addEventListener("change", function(event){
  // event.target references the element that actually triggered the event
  let target = event.target;
  
  // Check to see if the event was triggered by a DOM element
  // you care to handle
  if(target.classList.contains("select")){
    // Access the <p> element that is the previous sibling to the 
    // select that triggered the event and update it
    target.previousElementSibling.textContent = target.value
  }
});

<div>
  <p class="price">$15</p>
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="$20">40cmx40cm</option>
    <option value="$30">30cmx40cm</option>
    <option value="$50">50cmx50cm</option>
  </select>
</div>
<div>
  <p class="price">$15</p>
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="$20">40cmx40cm</option>
    <option value="$30">30cmx40cm</option>
    <option value="$50">50cmx50cm</option>
  </select>
</div>
<div>
  <p class="price">$15</p>
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="$20">40cmx40cm</option>
    <option value="$30">30cmx40cm</option>
    <option value="$50">50cmx50cm</option>
  </select>
</div>