javascript - 4 つの異なるドロップ リストのループを作成できますか?

Question

このコードが実際に機能しているにもかかわらず、ループにスリム化しようとしています...これまでのところ、私の試みはすべて失敗しています。表示されるのは、ID が異なる 4 つのドロップ リストです。ただし、クラス名は同じ(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

適度に最新のブラウザを使用する場合:

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

JS フィドルのデモ。

参考文献:

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

Answer 2

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 3

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