我在使用选择元素和 ID 链接创建 JavaScript 函数时遇到了一些问题。该功能应取决于选择的 dropdon 的选定选项/值。
我想做的是在单击选择下拉菜单时调用一个事件函数,然后将一个类应用到适当的 ID。
html是这样的:
<select class="select-trigger" >
<option value="value1">Value1</option>
<option value="Value2">Value2</option>
<option value="Value3">Value3</option>
</select>
添加类的元素:
<div id="value1"></div>
<div id="value2"></div>
<div id="value3"></div>
到目前为止我的功能(几乎可以正常工作):
var trigger = document.querySelectorAll('.trigger');
for (var i =0; i < trigger.length; i++) {
var btn = trigger[i];
btn.addEventListener('click', function () {
var id = this.options[this.selectedIndex].value;
document.querySelector('#' + id).classList.toggle('active');
}, false);
}
我认为我遇到的问题是我正在使用点击事件监听器调用该函数。我想我需要改用 onchange
函数吗?
此外,我只希望单个 div 在任何给定时间都有一个“事件”类。目前,该函数正在添加类,但不会在选择另一个类时将其删除。
这是一把 fiddle http://jsfiddle.net/2Rcjt/1/
注意 - 我不想在我的标记中放置任何内联 onclick
JS。
最佳答案
您可以将最后选择的选项 (div
) 保存到选择的某些属性中。然后每次用户更改选项时,只需切换最后选择的选项上的类即可使其处于非事件状态。代码:
var trigger = document.querySelectorAll('.trigger');
for(var i = 0; i < trigger.length; i++){
trigger[i].onchange = function(){
if(this.lastOption) this.lastOption.classList.toggle('active');
this.lastOption = document.getElementById(this.value);
this.lastOption.classList.toggle('active');
};
trigger[i].onchange();
}
Demo.
关于javascript - 从选择元素创建点击功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23626743/