title: show/hide div based on select value - jquery
body: <p>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.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="mc-form-field mc-full"&gt;
      &lt;label for="formDate"&gt;Payment Date:&lt;/label&gt;
      &lt;select name="mc-formPaymentDate" id="PaymentDate"&gt;
          &lt;option value="Please select"&gt;Please select&lt;/option&gt;
          &lt;option value="Single Date"&gt;Single Date&lt;/option&gt;
          &lt;option value="Date Range"&gt;Date Range&lt;/option&gt;
          &lt;option value="Single Month"&gt;Single Month&lt;/option&gt;
          &lt;option value="Last 30 Days"&gt;Last 30 Days&lt;/option&gt;
          &lt;option value="Last 60 Days"&gt;Last 60 Days&lt;/option&gt;
          &lt;option value="Last 90 Days"&gt;Last 90 Days&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div class="mc-form-field mc-half mc-inline"&gt;
      &lt;label for="mc-formFromDate"&gt;From Date:&lt;/label&gt;
      &lt;input type="text" name="formFromDate" id="mc-formFromDate" class="mc-text"&gt;
  &lt;/div&gt;
  
  &lt;div class="mc-form-field mc-half mc-inline mc-right" id="ToDate"&gt;
      &lt;label for="mc-formToDate"&gt;To Date:&lt;/label&gt;
      &lt;input type="text" name="formToDate" id="mc-formToDate" class="mc-text"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$("#PaymentDate").change(function() {
      if (this.value == 'Single Date') {
          $('#ToDate').hide();
      }
  }); 
  </code></pre>