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

为元素提供一个公共类（如果需要，可以保留id属性），然后使用委托：

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

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

Answer 2

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

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

Answer 3

为每个选择分配相同的类并按以下方式调用它。

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

Answer 4

简单就是那个

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

    alert('a');
});

使用多个div id和相同的脚本

4 个答案: