javascript - 将单击事件绑定(bind)到多个 元素

Question

我有一个选择菜单，我想将一个单击事件绑定(bind)到每个<option>元素。这样做的目的是向 <option> 添加一个类单击/选择元素时。这是我的 html 和 Javascript。我缺乏选择 <option> 的方法元素并将事件绑定(bind)到它们。任何及所有帮助将不胜感激。

HTML:

<div class="row">
  <div class="small-12 columns">
    <label>Select Menu
      <select id="SelectMenu">
        <option value="husker">Husker</option>
        <option value="starbuck">Starbuck</option>
        <option value="hotdog">Hot Dog</option>
        <option value="apollo">Apollo</option>
      </select>
    </label>
  </div>
</div>

Javascript

function myFunction() {
  console.log("Click Event");
}
var options = document.getElementById('SelectMenu');
for ( var i = 0; i < options.length; i++ ) {
  console.log(options[i].value);
  options[i].addEventListener('click', myFunction, false)
}

Code example

Answer 1

让我们看看您的代码做了什么:

function myFunction() {
  console.log("Click Event");
}

非常简单，一个函数。

接下来，

var options = document.getElementById('SelectMenu');

因此，options 被分配给#SelectMenu 元素。好的。

for ( var i = 0; i < options.length; i++ ) {
  console.log(options[i].value);
  options[i].addEventListener('click', myFunction, false)
}

现在，你开始有点错了。

您不必为其中的每个 option 元素添加监听器。

select 元素(您的 options 变量)发出 change每次您选择另一个选项时都会发生事件。

所以你可以简单地做

options.addEventListener('change', myFunction)

就是这样。

如果您想知道单击了哪个 option 元素，您还应该为回调函数定义一个事件参数，如下所示

function myFunction(e) {
  //e.target is the <select> element
  console.log(e.target.value);
  console.log("Click Event");
}

向单击的 option 元素添加类没有多大意义，因为您无法设置它们的样式。

更新:既然您明确要求向所选选项添加一个类，那么您可以这样做:

function myFunction(e) {
  //e.target is the <select> element
  console.log(e.target.selectedOptions[0]);
  console.log(e.target.value);
  console.log("Click Event");
}

弗雷德里克干杯。