показать/скрыть div на основе значения select - jquery

Question

Я пытаюсь проверить, является ли значение моего выпадающего списка «Single Date», а затем, если это так, скрыть 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

Он отлично работает, но вам нужно явно show ToDate снова, если тест является ложным:

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

http://jsfiddle.net/mblase75/3F93A/

Answer 2

Вы попробовали?

<script type="text/javascript"> 
$(document).ready(function(){ 
     $("#PaymentDate").change(function() { 
      if ($(this).val() == 'Single Date') 
       $('#ToDate').hide(); 
     }); 
}); 
</script> 

Обратите внимание, что я использую $ (это) .val() вместо this.value

Answer 3

Попробуйте это с помощью JQuery toggle метод, который может принимать логический флаг ли, чтобы показать или скрыть элемент.

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