HTML <select> JQuery .change no funciona

Question

Bien, no veo por qué esto no funciona. Parece bastante simple.

Aquí está mi menú desplegable:

<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> 

y aquí está el código JavaScript

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

En este momento sólo quiero conseguir que funcione para que pueda agregar funcionalidad. ¡Gracias!

Answer 1

Ese código es sintácticamente correcto. Lo más probable es que lo ejecute en el momento equivocado.

Usted desea enlazar el evento cuando el DOM está listo :

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

O bien, utilizar live:

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

O bien, utilizar delegate:

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

O, si está utilizando jQuery 1.7+:

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

---

No obstante, por lo general es la mejor manera de ejecutar un script una vez que el navegador ha terminado la prestación de marcado.

Answer 2

Su código es correcto y está trabajando para mí, ver aquí: http://jsfiddle.net/mobweb/2Skp9/

¿Seguro jQuery se ha cargado correctamente?

Answer 3

No estoy seguro si esto ayudará, pero usted podría intentar esto:

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

Answer 4

He intentado su código in jsFiffle. Agregué manualmente algunos años como opciones. Funciona bien.

Sólo se unen al evento en el .Cambiar $ (document) ready:

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