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

时间:2016-03-15 21:40:07

标签: javascript javascript-events event-handling

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

2 个答案:

答案 0 :(得分:2)

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

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

为点击的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");
}

干杯弗雷德里克。

答案 1 :(得分:1)

最好为select创建一个事件,然后检查事件中的值

    d = {1:(0,),2:(0,)}
    d[1] = d[1]+(0,)