title: jQuery conditional code for select menu
body: <p>I have some conditional jQuery code which shows input checkboxes depending on the value of a select dropdown menu. This seems to work ok but when the page is refreshed the checkboxes hide, its not until you select a value again from the select box that the correct checkboxes appear again.</p>
  
  <p>Is there a way to keep the values of both the select menu and the checkboxes after the page is reloaded?</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;select class="wpp_search_select_field_location"&gt;
     &lt;option value="Marbella"&gt;Marbella&lt;/option&gt;
     &lt;option value="Costa Del Sol West"&gt; Costa Del Sol West&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;ul class="seach_attribute_marbella_areas"&gt;
     &lt;li&gt;&lt;input type="checkbox" value="option1" name="option1"/&gt;Option 1&lt;/li&gt;
     &lt;li&gt;&lt;input type="checkbox" value="option2" name="option2"/&gt;Option 2&lt;/li&gt;
      &lt;li&gt;&lt;input type="checkbox" value="option3" name="option3"/&gt;Option 3&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="seach_attribute_costa_del_sol_west"&gt;
      &lt;li&gt;&lt;input type="checkbox" value="option4" name="option4"/&gt;Option 4&lt;/li&gt;
      &lt;li&gt;&lt;input type="checkbox" value="option5" name="option5"/&gt;Option 5&lt;/li&gt;
      &lt;li&gt;&lt;input type="checkbox" value="option6" name="option6"/&gt;Option 6&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function() {
  var $value1 = $('.seach_attribute_marbella_areas').hide();
  var $value2 = $('.seach_attribute_costa_del_sol_west').hide();
  
  $('.wpp_search_select_field_location').change(function() {         
      var selectedValue = $(this).val();
  
      if(selectedValue  === 'Marbella') {
          $value1.show();
          $value2.hide();
      } else if (selectedValue === 'Costa Del Sol West') {
          $value1.hide();
          $value2.show();
      } else {
          $value1.hide();
          $value2.hide();
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>You will see in the jsfiddle below that the checkboxes only appear when you select a value from the select box. The checkboxes need to appear on page load.</p>
  
  <p><a href="http://jsfiddle.net/fx8cwbjr/1/" rel="nofollow">jsfiddle</a></p>