Binding onchange để thả xuống

Question

Tôi hơi bối rối trong ràng buộc onchange đến select. Tôi có thể thấy có rất nhiều cách để làm điều này.

html

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

jquery

$(function(){ 

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

}); 

hoặc

$(function(){ 

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

}); 

Trong số đó 3 phương pháp

0.123.

1. Phương thức nào được coi là thực hành tiêu chuẩn?
2. Có bất kỳ thành tích nào với các phương pháp này không?

Answer 1

Bạn cũng có thể sử dụng .on

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

Trước jQuery 1.7, change() chỉ đơn giản là một cắt ngắn cho bind("change").

Kể từ 1.7, tuy nhiên, on() đã thay thế bind("change"), so change() là lối tắt thay thế.

Do đó, cách tốt nhất sẽ là;

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

Tôi thích tùy chọn thứ 2 vì nó cũng có thể được áp dụng tự động cho động được tạo động DOM.

Answer 2

tất cả các phương pháp jquery được đề cập có vẻ bằng nhau, tôi khuyên bạn nên sử dụng .change() làm cho mã của bạn dễ đọc hơn.

Tôi đã trải nghiệm rằng html onchange = "" được viết lại bởi các sự kiện liên kết jquery, nhưng nhiều cuộc gọi đến jquery .change() sẽ xử lý chuỗi các hành vi thường được mong muốn.

Để làm sạch mã, tôi chỉ sử dụng thuộc tính html onchange trong các chương trình đơn giản mà tôi biết rằng sẽ không có nhiều trình xử lý sự kiện và mã bên trong thực sự dễ dàng (thường là một hàm).

Answer 3

Thay vì trả lại số <select> mỗi lần, bạn nên thay đổi nội dung của nó (danh sách <option> phần tử).

Vì vậy, sử dụng như bạn đã là:

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

nhưng khi bạn cập nhật nó, chỉ cần trao đổi trên nội dung của nó (nơi newSelectElement là yếu tố mới <select>):

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