web-dev-qa-db-fra.com

HTML <select> JQuery .change ne fonctionne pas

Très bien, je ne vois pas pourquoi cela ne fonctionne pas. Cela semble assez simple.

Voici mon menu déroulant:

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

et voici le JavaScript

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

Pour le moment, je veux juste que cela fonctionne afin que je puisse ajouter des fonctionnalités. Merci!

javascriptjqueryselectdrop-down-menujstl
12
theCamburglar

Ce code est syntaxiquement correct. Probablement l'exécuter au mauvais moment.

Vous voudrez lier l'événement lorsque le DOM est prêt :

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

Ou utilisez live:

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

Ou utilisez delegate:

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

Ou, si vous utilisez jQuery 1.7+:

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

Néanmoins, il est généralement préférable d'exécuter le script une fois que le navigateur a fini de rendre le balisage.

32
xandercoded

J'ai essayé votre code dans jsFiffle . J'ai ajouté manuellement certaines années comme options. Cela fonctionne bien.

Il suffit de lier l’événement .change dans le $ (document) .ready:

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

Votre code est correct et fonctionne pour moi, voir ici: http://jsfiddle.net/mobweb/2Skp9/

Êtes-vous sûr que jQuery a été chargé correctement?

0
Louis B.

Vous ne savez pas si cela aidera, mais vous pouvez essayer ceci:

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