HTML <select> JQuery .change nie działa

Question

W porządku Nie rozumiem, dlaczego to nie działa. Wydaje się całkiem proste.

Oto moja rozwijane menu:

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

i oto JavaScript

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

Teraz po prostu chcę, aby to działa, więc mogę dodać funkcjonalność. Dzięki!

Answer 1

Ten kod jest poprawny pod względem składniowym. Najprawdopodobniej działa to w niewłaściwym czasie.

będziemy chcieli powiązać zdarzenie gdy DOM jest gotowy:

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

Lub użyj live:

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

Lub użyj delegate:

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

Lub, jeśli używasz jQuery 1.7+:

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

---

Niemniej jednak, jest to zwykle najlepiej wykonać skryptu po zakończeniu renderowania przeglądarka znaczników.

Answer 2

Twój kod jest poprawny i pracuje dla mnie, zobacz tutaj: http://jsfiddle.net/mobweb/2Skp9/

Czy na pewno jQuery został załadowany prawidłowo?

Answer 3

Nie wiem, czy to pomoże, ale można spróbować to:

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

Answer 4

Próbowałem swój kod in jsFiffle. Ręcznie dodałem kilka lat jako opcje. To działa poprawnie.

Wystarczy powiązać zdarzenie .change w $ (document) .ready:

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