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

问题描述

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

这是我只更改一个选择元素的代码：

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>

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

解决方法

试试这个

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

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

,

我认为您可以执行以下操作：

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

,

您可以通过使用“event delegation”来实现这一点，您可以在其中只在一个元素上设置一个处理程序，该元素是您希望处理事件的所有 select 元素的共同祖先。事件将在 select 处发起，但不会在那里处理，并将“冒泡”到您选择的祖先。然后，您在该祖先处处理事件，并使用可在处理程序中访问的 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
  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>

,

简单的解决方案

你可以使用这个运行良好的版本。

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>