HTML <select> JQuery.change не работает

Хорошо, я не понимаю, почему это не работает. Это кажется довольно простым.

Вот мое раскрывающееся меню:

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

и вот JavaScript

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

Сейчас я просто хочу заставить его работать, чтобы добавить функциональность. Спасибо!

Ответы

Ответ 1

Этот код синтаксически корректен. Скорее всего, он будет работать в неподходящее время.

Вы хотите связать событие, когда DOM готов:

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

Или используйте live:

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

Или используйте delegate:

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

Или, если вы используете jQuery 1.7+:

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

Тем не менее, обычно лучше выполнить script после завершения рендеринга браузера.

Ответ 2

Я пробовал свой код в jsFiffle. Я вручную добавил несколько лет в качестве опций. Он работает правильно.

Просто привяжите событие .change в документе $(document).ready:

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

Ответ 3

Ваш код верен и работает для меня, см. здесь: http://jsfiddle.net/mobweb/2Skp9/

Вы уверены, что jQuery правильно загружен?

Ответ 4

Не уверен, что это поможет, но вы можете попробовать следующее:

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