title: How to show a hidden drop down based on a drop down choice
body: <p>I posted last week about being able to toggle a hidden field based on a choice. I am having an issue now where, when I click on a choice from a dropdown selection, it won't hide/show the other dropdown I want displayed. </p>
  
  <p><strong><a href="https://jsfiddle.net/jq08398t/1/" rel="nofollow noreferrer">JSFiddle</a></strong></p>
  
  <p>I appreciate any help :)</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function () {
      $('select[name="YourLocation"]').change(function () {
          if ($(this).val() == 'Customer Care Center') {
              $('.CCC').show();
          } else {
              $('.CCC').hide();
          }
      });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="col-md-3"&gt;
     &lt;div class="form-group"&gt;
        &lt;label&gt;Your Location&lt;/label&gt;
        &lt;select name="YourLocation" class="form-control select2" style="width: 100%;" required&gt;
           &lt;option value="" disabled selected&gt;Select Your Location&lt;/option&gt;
           &lt;option value="Branch"&gt;Branch&lt;/option&gt;
           &lt;option value="Region"&gt;Region&lt;/option&gt;
           &lt;option value="Division"&gt;Division&lt;/option&gt;
           &lt;option value="Customer Care Center"&gt;Customer Care Center&lt;/option&gt;
           &lt;option value="Corporate"&gt;Corporate&lt;/option&gt;
        &lt;/select&gt;
     &lt;/div&gt;
     &lt;!-- /.form-group --&gt;
  &lt;/div&gt;
  &lt;!-- /.col --&gt;
  &lt;div class="col-md-3"&gt;
     &lt;div class="form-group"&gt;
        &lt;label&gt;&lt;/label&gt;
        &lt;select name="YourCenter" class="form-control select2 CCC" style="width: 100%;" required&gt;
           &lt;option value="" disabled selected&gt;Select Your Center&lt;/option&gt;
           &lt;option value="Dallas"&gt;Dallas&lt;/option&gt;
           &lt;option value="Los Angeles"&gt;Los Angeles&lt;/option&gt;
           &lt;option value="Phoenix"&gt;Phoenix&lt;/option&gt;
           &lt;option value="Tampa"&gt;Tampa&lt;/option&gt;
        &lt;/select&gt;
     &lt;/div&gt;
     &lt;!-- /.form-group --&gt;
  &lt;/div&gt;
  &lt;!-- /.col --&gt; 
  </code></pre>