javascript - Onchange 事件解决多个下拉菜单问题

Question

我有一个这样的列表:

<form>
<select id="List_22" >
  <option value="default">Default</option>
  <option value="1">Oil</option>
  <option value="2">Gas</option>  
  <option value="3">Power</option>
</select>
<form>

我想在下拉列表更改时启动一个功能，所以这工作正常:

document.getElementById("List_22").onchange = function() {...

但是，我有多个下拉菜单，它们都应该使用相同的功能。我尝试使用下面的通配符，但它不起作用

document.getElementById("[id^=L]").onchange = function() {

我做错了什么？我有点疯狂了。感谢大家抽出宝贵的时间。

Answer 1

问题是 document.getElementById 查找单个元素的精确 ID 匹配，因此它不支持属性选择器，也不返回多个元素。

在普通的旧 JavaScript 中，您可以使用支持 CSS 选择器和属性选择器的 document.querySelectorAll。请注意，IE8 之前不支持此功能。

var list = document.querySelectorAll('[id^=L]');
for(var i=0; i<list.length; i++){
    list[i].onchange = function(){
        // do something on change....
    };
}

或者因为你有 jQuery 标签，所以有一个 jQuery 版本:

$('[id^=L]').change(function(){
    // do something on change....
});

旁注:在这两种情况下，我都希望使属性选择器更具体，例如 select[id^=List_]。