show/hide div based on select value - jquery
<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>
