title: Show (Visible/Hidden NOT Show/Hide) HTML Element based on form select box selection
body: <p>The following worked perfectly for my needs. Took the state of a checkbox and did wonderful things for me; Made 3 different form elements visible (vs. show/hide) based on checkbox checked or not checked. Simple, I guess. Then again, I base "simple" on how symmetrical the code looks and if it's less that 10 lines. Other than that, I'm lost. However, I've officially given up on messing around with IE's checkbox border issue and X-browser alignment yippeedoodles. I want pixel perfect the hard way. But I lost that battle. But rather than get into any discussion about that, I need to accomplish the same thing using a form select box as I was able to do with the checkboxes (below):</p>
  
  <pre><code>&lt;form id="form"&gt;
  &lt;input id="checkbox" name="checkbox" type="checkbox" onclick="showhideid" /&gt;
  &lt;/form&gt;
  
  
  
  #IdOne, #IdTwo, #IdThree (visibility:hidden;}
  
  
  function showhideid()
  {
      if (document.form.checkbox.checked)
      {   
          document.getElementById("IdOne").style.visibility = "visible";
          document.getElementById("IdTwo").style.visibility = "visible";
          document.getElementById("IdThree").style.visibility = "visible";
          document.getElementById("IdFour").setAttribute("class", "required");
  
      }
      else
      {
          document.getElementById("IdOne").style.visibility = "hidden";
          document.getElementById("IdTwo").style.visibility = "hidden";
          document.getElementById("IdThree").style.visibility = "hidden";   
          document.getElementById("IdFour").setAttribute("class", "");
      }
  }
  </code></pre>
  
  <p>Now, if I can accomplish the same thing using a select box (below), I will die a happy man.</p>
  
  <p>This is as far as I've gotten. I'm super dizzy from reading Jquery/CSS man pages and I just can't put it all together.</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;form id="form"&gt;
  
  &lt;select name="SelectBox"&gt;
  &lt;option&gt;Make a Choice&lt;/option&gt;
  &lt;option value="Value1"&gt;Selection1&lt;/option&gt;
  &lt;option value="Value2"&gt;Selection2&lt;/option&gt;
  &lt;option value="Value3"&gt;Selection3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;label id="IdOne" for="input1"&gt;MeAndMyInputAreInvisibleByDesign&lt;/label&gt;
  &lt;input id="IdTwo" name="input1" type="text"&gt;
  
  &lt;span id="IdThree"&gt;Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
  &lt;/span&gt;
  
  &lt;input id="IdFour" name="input2" type="text" class="I have none, but I will soon. I hope" /&gt;
  
  &lt;/form&gt;
  
  &lt;/html&gt;
  </code></pre>