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，当所选选项不是 3 时，采用 showOrHide 参数显示 #test，并且3.
• 在事件处理程序中使用 this.value 或 select 元素的当前值.com/val” rel="nofollow">.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();
});

编辑：奖励：工作小提琴