javascript - 从选择元素创建点击功能

Question

我在使用选择元素和 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。

Answer 1

您可以将最后选择的选项 (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.