Javascript - 将点击事件绑定到多个 <options> 元素答案

【问题标题】：Bind a click event to multiple <options> elementsJavascript - 将点击事件绑定到多个 <options> 元素
【发布时间】：2016-07-01 13:39:16
【问题描述】：

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

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

【问题讨论】：

您没有将事件绑定到<option>s。您将单个change 处理程序绑定到<select>，然后根据选择的.value 执行适当的操作。

标签： javascript javascript-events event-handling

【解决方案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");
}

弗雷德里克干杯。

【讨论】：

非常感谢您的回答。我正要精神上试图弄清楚这一点。它完美地工作。类的添加是为了数据收集。现在我只需要将类限制为单个选项，以防止多个

【解决方案2】：

最好为选择创建一个事件，然后检查事件中的值

function selectClicked(id){
  console.log(id);
  myFunction() ;
}
function myFunction() {
  console.log("Click Event");
}
var options = document.getElementById('SelectMenu');
options.setAttribute("onchange", function(){selectClicked(options.value);});

【讨论】：