Javascript 更改函数触发标记名

Question

我有有效的 HTML 和 Javascript 代码，但仅适用于一个 select 标记。问题是我需要它来覆盖 HTML 中的所有 select 标签。因此，在选择所有选项时，应根据其值更改它们的颜色。

Some text <select> <option value='red'>wrong option</option> <option value='green'>right option</option> <option value='red'>wrong option</option> </select> some text.<br>
Some text <select> <option value='green'>right option</option> <option value='red'>wrong option</option> <option value='red'>wrong option</option> </select> some text.<br>
Some text <select> <option value='red'>wrong option</option> <option value='red'>wrong option</option> <option value='green'>right option</option> </select> some text.

这仅适用于 select 数组中的第一个元素。

var select = document.getElementsByTagName('select');

select[0].onchange = function() {
    for(var i = 0; i < select[0].options.length; i++) {
        if(i == select[0].selectedIndex) {
            select[0].style.color = this.value;
        } else {
            select[0].options[i].style.color = 'black';
        }
    }
}

Answer 1

您使用 select[0] 专门针对第一个 select 元素。如果您想将其应用于所有，则需要一个循环:

for (var i = 0; i < select.length; i++) {
  select[i].onchange = function() { ... }
}