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>

I've tried for loops and forEach but nothing worked (probably cause i'm doing it wrong). Any help would be appreciated. I'm losing my mind.

Please update your question to include the other `select` elements and also the JavaScript that declares the `select` variable. — Scott Marcus, Jan 26 '21 at 13:24
Also (FYI), `price.innerText = select.options[select.selectedIndex].value` can just be `price.textContent = this.value;`. — Scott Marcus, Jan 26 '21 at 13:25
@ScottMarcus the other select elements are exactly the same, with the same classes and everything. And thank you for that info bro, preciate it. — ameerHarbi, Jan 26 '21 at 13:41

Scott Marcus · Accepted Answer · 2021-10-07T19:54:21.563

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
  // Check to see if the event was triggered by a DOM element you care to handle
  if(event.target.classList.contains("select")){
    // Access the <p> element that is the previous sibling to the 
    // select that triggered the event and update it
    event.target.previousElementSibling.textContent = event.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>

score 1 · Answer 2 · answered Jan 26 '21 at 13:27

1

Try this

const selects = document.querySelectorAll('.selects');

 selects.forEach(el => el.addEventListener('click', event => { 
    //add you code
     }));

answered Jan 26 '21 at 13:27

Jobelle

2,717
1
15
26

it still doesn't work. I even tried the 'change' event instead of 'click'. – ameerHarbi Jan 26 '21 at 13:45
Can you please check the length of const select = document.querySelectorAll(".select"); – Jobelle Jan 26 '21 at 13:48
The length is 8. – ameerHarbi Jan 26 '21 at 14:15

Fran Perejón · Answer 3 · 2021-01-26T14:14:59.257

0

I think you can do the following thing:

selects = document.querySelectorAll(".select");
prices = document.querySelectorAll(".price");
for(let index = 0; index < selects.length; index+=1){
  selects[index].addEventListener("change", () => {
    prices[index].innerText = selects[index].options[selects[index].selectedIndex].value;
  });
}

edited Jan 26 '21 at 14:14

answered Jan 26 '21 at 13:29

Fran Perejón

101
9

[Don't use `.getElementsByClassName()`.](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) – Scott Marcus Jan 26 '21 at 13:36
@FranPerejón I tried it before and I tried it again now but still no use. – ameerHarbi Jan 26 '21 at 13:43
thanks for say it @ScottMarcus I didn't know that. – Fran Perejón Jan 26 '21 at 13:50
I edit the code @ameerHarbi if you want to prove it another time – Fran Perejón Jan 26 '21 at 13:56
@FranPerejón thank you, this works as well. You just need to change the 'price' on the last line to 'prices'. – ameerHarbi Jan 26 '21 at 14:12

score 0 · Answer 4 · answered Jan 26 '21 at 13:52

Simple Solution

You can use this version which works fine.

let price = document.querySelector(".price");
let select = document.getElementsByClassName("select");

let i;
for (i = 0; i < select.length; i++) {
  select[i].addEventListener('change', (self) => {
    let el = self.target;
    let value = el.options[el.selectedIndex].value;
    price.innerText = value;
  });
}

<div>
  <p class="price">$15</p>
  
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="$201">40cmx40cm</option>
    <option value="$301">30cmx40cm</option>
    <option value="$501">50cmx50cm</option>
  </select>
  
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="$202">40cmx40cm</option>
    <option value="$302">30cmx40cm</option>
    <option value="$502">50cmx50cm</option>
  </select>
  
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="$203">40cmx40cm</option>
    <option value="$303">30cmx40cm</option>
    <option value="$503">50cmx50cm</option>
  </select>
</div>

[Don't use .getElementsByClassName()](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) — Scott Marcus, Jan 26 '21 at 16:02
click on run code snippet above and tell me if that version works for you? — centralhubb.com, Jan 26 '21 at 16:18

score 0 · Answer 5 · answered Jun 19 '23 at 13:23

Maybe this can work for you, in my case I use of this way query selector All

var selects = document.querySelectorAll('select');
        selects.forEach(function(select) {
            select.onchange = function() {
                actualizarBarraProgreso(progressBar, formInputs);
            };
        });

Adding event listener to multiple select elements in js

5 Answers5

Simple Solution