Question

我在使用select元素和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有一个＆＃34; active＆＃34;在任何给定的时间上课。目前，该功能正在添加类，但在选择另一个时不会将其删除。

这是一个小提琴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();
}

从select元素创建单击函数

1 个答案:

Demo.