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

Question

我有不同的 select 元素用于改变不同产品的尺寸，每个尺寸都有不同的价格。 我可以用一个 select 元素使用 querySelector 来做到这一点，但它不适用于 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">$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 但没有任何效果（可能是因为我做错了）。 任何帮助，将不胜感激。 我正在失去理智。

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

您可以通过使用“事件委托”来完成此操作，您可以在一个元素上仅设置一个处理程序，该元素是您希望处理事件的所有select元素的共同祖先。 该事件将起源于select但不会在那里处理，并将“冒泡”到您选择的祖先。 然后，您在该祖先处处理事件，并使用处理程序中可访问的event.target来引用触发事件的实际元素，并使用相对 DOM 引用来引用您需要更新的p元素。

这样做的好处是您只需设置一个处理程序（节省了 memory 和性能）并且代码得到了简化。 此外，您可以添加新的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>

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">$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>