HTML <select> JQuery .thay đổi không hoạt động

Question

Được rồi, tôi không hiểu tại sao điều này không hoạt động. Nó có vẻ khá đơn giản.

Đây là trình đơn thả xuống của tôi:

<div> 
    <form> 
     <select id='yearDropdown'> 
      <c:forEach var="years" items="${parkYears}"> 
       <option value=/events.html?display_year=${years}<c:if test="${currentYear == years}">selected="selected"</c:if>>${years}</option> 
      </c:forEach> 
     </select> 
    </form> 
</div> 

và đây là hoạt Javascript

$("#yearDropdown").change(function() { 
    alert('The option with value ' + $(this).val()); 
}); 

Ngay bây giờ tôi chỉ muốn làm cho nó làm việc vì vậy tôi có thể thêm chức năng. Cảm ơn!

Answer 1

Mã đó chính xác về cú pháp. Nhiều khả năng chạy nó vào thời điểm sai.

Bạn sẽ muốn để ràng buộc sự kiện này khi DOM đã sẵn sàng:

$(function(){ /* DOM ready */ 
    $("#yearDropdown").change(function() { 
     alert('The option with value ' + $(this).val()); 
    }); 
}); 

Hoặc, sử dụng live:

$("#yearDropdown").live('change', function() { 
    alert('The option with value ' + $(this).val()); 
}); 

Hoặc, sử dụng delegate:

$(document.body).delegate('#yearDropdown', 'change', function() { 
    alert('The option with value ' + $(this).val()); 
}); 

Hoặc, nếu bạn đang sử dụng jQuery 1.7+:

$("#yearDropdown").on('change', function() { 
    alert('The option with value ' + $(this).val()); 
}); 

---

Tuy nhiên, nó thường là tốt nhất để thực hiện kịch bản một lần trình duyệt đã xong render Markup.

Answer 2

Mã của bạn là đúng và đang làm việc cho tôi, xem tại đây: http://jsfiddle.net/mobweb/2Skp9/

Bạn có chắc chắn jQuery đã được nạp đúng cách?

Answer 3

Không chắc chắn nếu điều này sẽ giúp đỡ, nhưng bạn có thể thử điều này:

$("#yearDropdown").live("change", function() { 
    alert('The option with value ' + $(this).val()); 
}); 

Answer 4

Tôi đã thử code của bạn in jsFiffle. Tôi đã thêm vài năm làm tùy chọn theo cách thủ công. Nó hoạt động đúng.

Chỉ cần ràng buộc sự kiện .change trong $ (document) .ready:

$(document).ready(function(){ 
    $("#yearDropdown").change(function() { 
     alert('The option with value ' + $(this).val()); 
    });​ 
});