Javascript-将click事件绑定到多个 <options> 元素

Question

我有一个选择菜单，我想将一个单击事件绑定到每个<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>

Java脚本

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

代码示例

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元素（yout 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");
}

将类添加到clicked 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");
}

干杯弗雷德里克。

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