jQuery, как проверить выбранную опцию в форме выбора?

Question

У меня есть эта форма выбора:

<select name="select_date" id="select_date">
    <optgroup label="Select Date">
        <option value="0" selected="selected">Custom Date</option>
    </optgroup>
    <optgroup label="Or Custom Date">
        <option value="1"> Current Month</option>
        <option value="2"> Last Month</option>
        <option value="3"> Last 3 Months</option>
        <option value="4"> Last 6 Months</option>
        <option value="5"> Last Ever</option>
    </optgroup>
</select>

<div id="test">hide me</div>

Как я могу проверить выбранную опцию, чтобы: if option 3 selected then hide the div with id test?

Answer 1

$("#test").toggle($("#select_date").val() != 3);

Завернут в обработчик событий для события change:

$("#select_date").bind("change", function () {
    $("#test").toggle(this.value != 3);
}).change();

Пример: http://jsfiddle.net/Qde8d/

Примечания:

• Используйте версию toggle, которая принимает параметр showOrHide, чтобы показать #test, когда выбранный параметр не равен 3, и скрыть его, когда он равен 3.
• Доступ к текущему значению элемента select с использованием this.value внутри обработчика событий или .val(), если вы работаете с объектом jQuery.

Answer 2

Пример

$('#select_date').change(function() {
    $('#test').show();
    if($(this).val() === '3') {
        $('#test').hide();
    }
});

Answer 3

$('#select_date').change(function(){
    if ($('option:selected', this).val() == 3) $('div#test').hide();
});

Редактировать: Бонус: Рабочая скрипка