Блог

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

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

 $("#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.

Пример

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

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

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