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
– Scott Marcus, Commented Jan 26, 2021 at 13:24
Also (FYI), price.innerText = select.options[select.selectedIndex].value can just be price.textContent = this.value;. — Scott Marcus
– Scott Marcus, Commented Jan 26, 2021 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
– ameerHarbi, Commented Jan 26, 2021 at 13:41

Scott Marcus · Accepted Answer · 2021-10-07 19:54:21Z

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>

Jobelle · Accepted Answer · 2021-01-26 13:27:28Z

2

Try this

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

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

answered Jan 26, 2021 at 13:27

Jobelle

2,8441 gold badge17 silver badges27 bronze badges

3 Comments

ameerHarbi Over a year ago

it still doesn't work. I even tried the 'change' event instead of 'click'.

Jobelle Over a year ago

Can you please check the length of const select = document.querySelectorAll(".select");

ameerHarbi Over a year ago

The length is 8.

Fran Perejón · Accepted Answer · 2021-01-26 14:14:59Z

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, 2021 at 14:14

answered Jan 26, 2021 at 13:29

Fran Perejón

1019 bronze badges

5 Comments

Scott Marcus Over a year ago

Don't use .getElementsByClassName().

ameerHarbi Over a year ago

@FranPerejón I tried it before and I tried it again now but still no use.

Fran Perejón Over a year ago

thanks for say it @ScottMarcus I didn't know that.

Fran Perejón Over a year ago

I edit the code @ameerHarbi if you want to prove it another time

ameerHarbi Over a year ago

@FranPerejón thank you, this works as well. You just need to change the 'price' on the last line to 'prices'.

Cristobal Nyram · Accepted Answer · 2023-06-19 13:23:02Z

0

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

answered Jun 19, 2023 at 13:23

Cristobal Nyram

12 bronze badges

Collectives™ on Stack Overflow

Adding event listener to multiple select elements in js

4 Answers 4

Comments

3 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related