title: How to show/hide divs when select options are clicked
body: <p>I have a select box and want to show a help text in a hidden div when you click on an option:</p>
  
  <pre><code>&lt;select  onchange="optionCheck()" multiple="multiple" name="test" id="options" size="15" class="form-select"&gt;
      &lt;option value="1"&gt;option 1&lt;/option&gt;
      &lt;option value="2"&gt;option 2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="help1" style=visibility:hidden&gt;help text 1&lt;/div&gt;
  &lt;div id="help2" style=visibility:hidden&gt;help text 2&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      function optionCheck(){
          var option = document.getElementById("options").value;
          if(option == "1"){
              document.getElementById("help1").style.visibility ="visible";
              document.getElementById("help2").style.visibility ="hidden";
          }
          if(option == "2"){
              document.getElementById("help2").style.visibility ="visible";
              document.getElementById("help1").style.visibility ="hidden";
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I create a simple loop so I don't have to write "if" statements for each option?</p>
  
  <pre><code> document.getElementById(option).style.visibility ="visible";
  </code></pre>
  
  <p>isn't working - javascript and me don't get along well ;-)</p>
  
  <p>Also, is there a simple way to hide all other divs when an option is selected?</p>