title: Reset the value of a drop down list when it is hidden again
body: <p>Once the user selects their desired "area", they are presented with options for that specific area. I have a different hidden drop down for each area that can be selected. If the user decides to go back and select a different "area" once a selection has been made, the "area_options" becomes hidden again. When hiding "area_options", is it possible to restore the selected value back to it's original value?</p>
  
  <pre><code> &lt;script type='text/javascript'&gt;
   var area = document.getElementById('area');
   var area_options = document.getElementById('area_options');
  
  
   if(area.value === 'selection') {
                      area_options.style.display = 'block';
  
                  } else if(area.value != 'selection') {
                      area_options.style.display = 'none';
  
                  } else {
             }
  &lt;/script&gt;
  
  &lt;html&gt;  
  &lt;tr&gt;    
  &lt;td align='center'&gt;
  &lt;select class='dropdown1' name='area' id='area' style='display: none;'&gt;     
  &lt;option selected disabled&gt;Problem Area&lt;/option&gt;
  
  &lt;?php   
  foreach($array_area as $value){
  echo "&lt;option value='$value'&gt;$value&lt;/option&gt;"; } 
  ?&gt;
  
  &lt;/td&gt;   
  &lt;/tr&gt;   
  &lt;/select&gt;
  
  &lt;tr&gt;
  &lt;td align='center'&gt;
  &lt;div id='area_options' style='display: none;'&gt;
  &lt;select class='dropdown1' name='area_options'&gt;
  &lt;option selected disabled&gt;Area Options&lt;/option&gt;
  
  &lt;?php 
  foreach($array_areaoptions as $value){
  echo "&lt;option value='$value'&gt;$value&lt;/option&gt;"; } 
  ?&gt;
  
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt; 
  &lt;/select&gt;
  
  &lt;/html&gt;
  </code></pre>