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

    $('form select').on('change', function(){

    // Your code here
    });

Answer 2

问题是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_]。

Answer 3

在普通的javascript中，您可以执行此通用搜索，该搜索应该适用于每个浏览器，而不需要正则表达式。

var dropdowns = document.getElementsByTagName("select"),
    item;

for (var i = 0, count = dropdowns.length; i < count; i++) {
    item = dropdowns[i];
    if (item.id && item.id.indexOf("List_") == 0) {
        item.onchange = function () {
            alert(this.options[this.selectedIndex].text);
        };
    }
}

工作示例：http://jsfiddle.net/Rq9nb/

Answer 4

此类案例的最佳程序是，为要在更改时调用函数的所有下拉列表添加公共类。例如：为所有必需的下拉列表添加“触发器更改”类。然后下面的绑定事件应该适合你。

$('form select.trigger-change').on('change', function(){
  // Your code here
});

这样，您可以选择要触发更改事件功能的下拉列表，也可以选择不触发更改事件功能的下拉列表。

希望这会有所帮助：）

多个下拉列表问题的Onchange事件

4 个答案: