HTML <select> JQuery .change non funziona

Question

OK, non vedo perché questo non funziona. Sembra abbastanza semplice.

Ecco il mio menu a discesa:

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

e qui è il JavaScript

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

In questo momento ho solo voglia di farlo funzionare in modo da poter aggiungere funzionalità. Grazie!

Answer 1

Questo codice è sintatticamente corretto. Molto probabilmente lo sta eseguendo nel momento sbagliato.

Avrai voglia di legare l'evento quando il DOM è pronto :

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

In alternativa, utilizzare live:

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

In alternativa, utilizzare delegate:

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

Oppure, se stai usando jQuery 1.7+:

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

---

Tuttavia, di solito è meglio per eseguire lo script una volta che il browser ha finito di rendering Markup.

Answer 2

Il codice è corretto e sta lavorando per me, vedere qui: http://jsfiddle.net/mobweb/2Skp9/

Sei sicuro di jQuery è stata caricata correttamente?

Answer 3

Non sono sicuro se questo aiuterà, ma si potrebbe provare questo:

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

Answer 4

Ho provato il codice in jsFiffle. Ho aggiunto manualmente alcuni anni come opzioni. Funziona bene.

Basta legare l'evento .Per passare nel $ (document) .ready:

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