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>

如何检查所选选项，以便:如果选择了选项 3，则隐藏带有 id test 的 div？

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 参数，当所选选项不是 3 时显示 #test，当选项为 3 时隐藏它。
• 使用事件处理程序内的 this.value 或 .val() 访问 select 元素的当前值如果您正在使用 jQuery 对象。