jquery - 将 onchange 绑定到下拉列表

Question

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

html

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

jQuery

$(function(){

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

});

或者

 $(function(){

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

});

这3种方法中

score 17 · Accepted Answer

你也可以使用.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.

score 2 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

所以像你一样使用它：

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

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

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

3 回答 3