CODEWITHSUNDEEP
jquery
user1141329
user1141329

Reputation: 21

show/hide div based on select value - jquery

I'm trying to check to see if the value of my dropdown is "Single Date" and then if so, to hide the div #ToDate. Not sure what I'm doing wrong here.

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();
    }
});

Upvotes: 1

Views: 5632

Answers (3)

ShankarSangoli
ShankarSangoli

Reputation: 69915

Try this using jQuery toggle method which can take a boolean flag whether to show or hide the element.

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

Upvotes: 7

Nick Bork
Nick Bork

Reputation: 4841

Did you try?

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

Note that I use $(this).val() instead of this.value

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92983

It works fine, but you need to explicitly show the ToDate again if the test is false:

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

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

Upvotes: 1

Related Questions