在同一段脚本中使用多个 div id答案

【问题标题】：Using multiple div id's with same piece of script在同一段脚本中使用多个 div id
【发布时间】：2015-04-05 20:50:54
【问题描述】：

我在一个页面上有几个选择框，基本上任何时候任何这些框发生 onchange 事件时，我都想使用相同的代码，而不是为每个选择框的 id 制作单独的脚本。原因是我可能会在一个页面上看到几十个这样的选择框，而所有重复的代码都会变得一团糟。

<select name="drop_list_menu_1" id="drop_list_menu_1">
<option value="letter:a">A</option>
<option value="letter:b">B</option>
<option value="letter:c">C</option>
</select>

<select name="drop_list_menu_2" id="drop_list_menu_2">
<option value="letter:a">A</option>
<option value="letter:b">B</option>
<option value="letter:c">C</option>
</select>

<select name="drop_list_menu_3" id="drop_list_menu_3">
<option value="letter:a">A</option>
<option value="letter:b">B</option>
<option value="letter:c">C</option>
</select>

我处理 onchange 事件的代码：

<script type="text/javascript">

        $(document).ready(function () {

            // if user chooses an option from the select box...
            $("#drop_list_menu_1").change(function () {

                //doin some stuff
            }); 

</script>

那么，我怎样才能得到这个：

$("#drop_list_menu_1").change(function () {

                    //doin some stuff
                });

捕捉正在使用的页面上的任何选择框？包含正则表达式的东西？

【问题讨论】：

ID 应该用于单个元素，如果您需要多个，添加一个类会更合适。你能这样做还是不能触摸 HTML？
所以，我继续在我的选择器中添加了一个 class="drop"。而且，页面上还有几个其他不相关的选择框，使类关联成为唯一的选项。然后我尝试了你所有的答案，而 WPFRookie 的答案是唯一有效的答案。谢谢大家:)

标签： javascript jquery ajax onchange

【解决方案1】：

给元素一个通用类（如果需要，可以保留 id 属性），然后使用委托：

$(document).on("change", "your-select-class", function() {
  var changedElement = this;
  // ...
});

您只需要一个调用来设置事件处理程序，它就可以在页面上处理您需要的任意数量的副本。

【讨论】：

【解决方案2】：

您可以使用jQuery's attribute starts-with selector 选择名称以“drop_list_menu_”开头的所有下拉菜单：

$("select[name^='drop_list_menu_']").change(function(){
    //doin some stuff
});

【讨论】：

【解决方案3】：

为每个 Select 分配相同的类并如下调用它。

$(".ClassName").change(function (e) {
      var SelectId = e.target.id
});

【讨论】：

【解决方案4】：

就这么简单

$("select").change(function () {

    alert('a');
});

【讨论】：

没用，如果页面上有更多selects。例如，将来可能会添加它们。
这段代码会将相同的事件处理程序附加到页面上的所有select 元素。 OP 当前显示其中三个，但实际页面中可能并非如此。即使是这样，将来也可以更改页面以添加另一个页面。如果新的select 不需要附加相同的事件处理程序，则可能意味着页面将被破坏。
啊，我当然认为您还有其他想法，这正是针对这种特殊情况而没有其他条件的情况，但无论如何谢谢