title: Display content if certain select values are selected
body: <p>I have a select box with a list of countries - if the select value is changed to certain countries I want a VAT box to display otherwise is should remain hidden.</p>
  
  <p>When page loads and country-display is blank then vat-display should be hidden - if country-display is changed to Ireland or Spain (or is already set to Ireland or Spain) then vat-display should show. If country-display is changed to United States, it should hide vat-display and so on.</p>
  
  <p>I have checked out so many other answers which look similar but cannot get this to work - I thought <a href="https://stackoverflow.com/a/11295625/1278201">https://stackoverflow.com/a/11295625/1278201</a> was what I was looking for but it still does not work even though the linked fiddle in that answer seems to do exactly what I need.</p>
  
  <pre><code>&lt;script type="text/javascript" src="includes/js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $("#country-display").on("change", function() {
          $("#vat-display").hide();
          if ( $(this).val() == 'Ireland'||$(this).val() == 'Spain' ) {
              $("#vat-display").show();
          } 
      });
  });
  &lt;/script&gt;
  
  &lt;div id="country-display"&gt;
      &lt;label&gt;Country:&lt;/label&gt;
      &lt;select name="country"&gt;
          &lt;option value=""&gt;Please choose&lt;/option&gt;
          &lt;option value="United States"&gt;United States&lt;/option&gt;
          &lt;option value="United Kingdom"&gt;United Kingdom&lt;/option&gt;
          &lt;option value="Ireland"&gt;Ireland&lt;/option&gt;
          &lt;option value="Spain"&gt;Spain&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div id="vat-display" style="display:none;"&gt;
      &lt;label&gt;VAT:&lt;/label&gt;
      &lt;input type="text" name="vat"&gt;
  &lt;/div&gt;
  </code></pre>