title: value from dropdown show/hides div and keeps its state
body: <p>im relatively new to ROR, and would like some help with the following code. </p>
  
  <p>I would like to show a div (it's called demographics) when a specific selection ("Customers") is made form a dropdown. If an option other than "Customers" is selected from the dropdown, I would like that the demographicsv div remain hidden. </p>
  
  <p>At present, my code is partially working. It shows and hides the div; however, when I save the page and come back to it, the div is hidden, even if "Customers" is selected in the dropdown. This might be because the default setting is: display:none.</p>
  
  <p>Is there a way to make sure that the field is displayed on page load when the proper selection has been made?? And I suppose a way to make the opposite true too--> a div with display:block; remains hidden if the field from the dropdown does not match the required field.</p>
  
  <p>Any help would be extremely appreciated. Thank you and I sincerely appreciate your time:</p>
  
  <p>my code (HAML):</p>
  
  <pre><code>= f.select :who, WHO, {}, :onChange =&gt; "showDemographics(this)", :prompt =&gt; true
  
  #demographics{:style =&gt; "display:none;"}
    %p.information
      please fill out the following demographics.
    %div{:class =&gt; "label_leftalign field"}
      = f.label :age, "Age"
      = f.select :age, AGES, :prompt =&gt; true
    %div{:class =&gt; "label_leftalign field"}
      = f.label :race, 
      = f.select :race, RACES, :prompt =&gt; true
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>  function showDemographics(obj)
    {
      if(obj[obj.selectedIndex].value == 'Customer')
      {
          document.getElementById('demographics').style.display = 'block';
      }
      else
      {
          document.getElementById('demographics').style.display = 'none';
      }
    }
  </code></pre>
  
  <p>EDIT::
  OK, So the key issue is that on page reload a div remains hidden even if the correct value is in the dropdown box. I suppose that this can be solved by one of two ways 1. running some sort of validation on everytime the page is loaded or 2. cookies.</p>
  
  <p>Unfortunately, I'm not very well versed in Javascript or jQuery... and I've never implemented cookies on a site, and would prefer to avoid using them if possible. </p>
  
  <p>Could anyone help me write a script that validates the presence of Customer in the dropdown and shows/hides a div accordingly? Thank you, and thanks to Carlos Pardilla and M. Cypher for their help thus far.  </p>