javascript - 在同一段脚本中使用多个 div id

Question

我在页面上有几个选择框，基本上任何时候任何这些框发生 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
                });

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

Answer 1

为元素提供一个公共(public)类(如果需要，可以保留 id 属性)，然后使用委托(delegate):

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

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