将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种方法中

1. 哪一个被视为标准做法？
2. 这些方法有什么优点吗？

Answer 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

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

Answer 2

所有提到的jquery方法似乎都是相同的，我建议使用.change（）让你的代码更容易阅读。

我经历过html onchange =“”被jquery绑定事件重写，但多次调用jquery .change（）会链接处理程序，这通常是想要的行为。

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

Answer 3

而不是每次重新绑定<select>，而不是仅仅交换其内容（<option>元素列表）。

所以请按照原样使用：

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

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

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