为js中的多个select元素添加事件监听器

Question

我有不同的 select 元素来改变不同产品的尺寸，每个尺寸都有不同的价格。我可以使用 querySelector 用一个 select 元素来完成，但它不适用于 querySelectorAll.

这是我仅更改一个 select 元素的代码：

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

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

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

我试过 for 循环和 forEach，但没有任何效果（可能是因为我做错了）。任何帮助，将不胜感激。我快疯了。

Answer 1

试试这个

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

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

Answer 2

我认为你可以做以下事情：

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

Answer 3

您可以通过使用“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 在处理程序中访问以引用触发事件的实际元素和相对 DOM 引用来引用 p 元素来完成此操作你需要更新。

这里的好处是您只需设置一个处理程序（这样可以节省内存和性能）并且简化了代码。此外，您可以添加新的 select 结构而无需更改处理代码。

// 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"></p>
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="">40cmx40cm</option>
    <option value="">30cmx40cm</option>
    <option value="">50cmx50cm</option>
  </select>
</div>
<div>
  <p class="price"></p>
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="">40cmx40cm</option>
    <option value="">30cmx40cm</option>
    <option value="">50cmx50cm</option>
  </select>
</div>
<div>
  <p class="price"></p>
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="">40cmx40cm</option>
    <option value="">30cmx40cm</option>
    <option value="">50cmx50cm</option>
  </select>
</div>

Answer 4

简单的解决方案

您可以使用这个版本，效果很好。

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"></p>
  
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="1">40cmx40cm</option>
    <option value="1">30cmx40cm</option>
    <option value="1">50cmx50cm</option>
  </select>
  
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="2">40cmx40cm</option>
    <option value="2">30cmx40cm</option>
    <option value="2">50cmx50cm</option>
  </select>
  
  <select class="select">
    <option disabled hidden selected>size</option>
    <option value="3">40cmx40cm</option>
    <option value="3">30cmx40cm</option>
    <option value="3">50cmx50cm</option>
  </select>
</div>

为js中的多个select元素添加事件监听器

Adding event listener to multiple select elements in js

html

javascript

html-select

selectedindex

简单的解决方案