jquery - 根据选择值显示/隐藏 div - jquery

Question

我正在尝试检查下拉列表的值是否为“单一日期”，如果是，则隐藏 div #ToDate。不确定我在这里做错了什么。

HTML

<div class="mc-form-field mc-full">
    <label for="formDate">Payment Date:</label>
    <select name="mc-formPaymentDate" id="PaymentDate">
        <option value="Please select">Please select</option>
        <option value="Single Date">Single Date</option>
        <option value="Date Range">Date Range</option>
        <option value="Single Month">Single Month</option>
        <option value="Last 30 Days">Last 30 Days</option>
        <option value="Last 60 Days">Last 60 Days</option>
        <option value="Last 90 Days">Last 90 Days</option>
    </select>
</div>

<div class="mc-form-field mc-half mc-inline">
    <label for="mc-formFromDate">From Date:</label>
    <input type="text" name="formFromDate" id="mc-formFromDate" class="mc-text">
</div>

<div class="mc-form-field mc-half mc-inline mc-right" id="ToDate">
    <label for="mc-formToDate">To Date:</label>
    <input type="text" name="formToDate" id="mc-formToDate" class="mc-text">
</div>

Javascript

$("#PaymentDate").change(function() {
    if (this.value == 'Single Date') {
        $('#ToDate').hide();
    }
}); 

Answer 1

尝试使用 jQuery toggle 方法，该方法可以采用 bool 标志来显示或隐藏元素。

$("#PaymentDate").change(function() {
   $('#ToDate').toggle(this.value != 'Single Date');
});