我可以为4个不同的拖放列表创建一个循环吗？

Question

尽管这个代码实际上工作，我试图把它缩小到一个循环...到目前为止，我所有的尝试都失败了。你会看到四个具有不同ID的下拉列表...但是，它们具有相同的类名称(optionLinks)。 下面是代码：

function init(){ 

    var allE = document.getElementById("executive"); 
    allE.onchange = loadLink; 

    var allL = document.getElementById("legislative"); 
    allL.onchange = loadLink; 

    var allJ = document.getElementById("judicial"); 
    allJ.onchange = loadLink; 

    var allS = document.getElementById("state"); 
    allS.onchange = loadLink; 
} 

谢谢大家:)

Answer 1

var ids = ['executive','legislative','judicial','state']; 
for (var i = 0; i < ids.length; i++) 
    document.getElementById(ids[i]).onChange = loadLink; 

或者......

var elements = document.getElementsByClassName('optionLinks'); 
for (var i = 0; i < elements.length; i++) 
    elements[i].onChange = loadLink; 

Answer 2

elements = document.getElementsByClassName('optionLinks'); 
for (var i = 0; i < elements.length; i++) { 
    elements[i].onchange = loadLink; 
} 

Answer 3

随着适度跟上时代的浏览器：

[].forEach.call(document.querySelectorAll('.optionLinks'), function(a){ 
    a.addEventListener('change', loadLink); 
}); 

JS Fiddle demo。

参考文献：

• Array.prototype.forEach()。
• document.querySelectorAll()。
• Function.prototype.call()。