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