将 onchange 绑定到下拉列表答案

【问题标题】：Binding onchange to dropdown将 onchange 绑定到下拉列表
【发布时间】：2013-02-26 12:42:45
【问题描述】：

我对将onchange 绑定到select 有点困惑。我可以看到有多种方法可以做到这一点。

html

<select id="ddl" onchange="test()"></select>

jquery

$(function(){

    $("#ddl").change(function(){
               return test();
           });

});

或

 $(function(){

    $("#ddl").bind("change", function(){
               return test();
           });

});

这三种方法中

【问题讨论】：

【解决方案1】：

你也可以使用.on

$('SELECT').on('change',function(){
   // code
});

在 jQuery 1.7 之前，change() 只是bind("change") 的捷径。

然而，从 1.7 开始，on() 已取代 bind("change")，so change() 是它的快捷方式。

因此，最好的方法是；

$("SELECT").bind("change", function(e) {});
$("SELECT").on("change", function(e) {});

我更喜欢第二个选项，因为它也可以自动应用于动态生成的DOM。

【讨论】：

【解决方案2】：

所有提到的 jquery 方法似乎都是平等的，我建议使用 .change() 使您的代码更易于阅读。

我体验过 html onchange="" 被 jquery 绑定事件重写，但是多次调用 jquery .change() 将链接处理程序，这通常是想要的行为。

为了使代码简洁，我只在简单的程序中使用 html onchange 属性，我知道这些程序不会有多个事件处理程序，而且里面的代码非常简单（通常是一个函数）。

【讨论】：

【解决方案3】：

与其每次都重新绑定<select>，不如只交换其内容（<option> 元素列表）。

所以就照原样使用吧：

$("#ItemsPerPage").change(function(e) { return updatePaging(); });

但是当你更新它时，只需换掉它的内容（其中 newSelectElement 是新的<select> 元素）：

function updateItemsPerPage( newSelectElement ) {
    $("#ItemsPerPage").empty().append( newSelectElement.childNodes );
}

【讨论】：