title: show/hide form depending on dropdown
body: <p>I am trying to show one specific form depending of the dropbox choice. This is what I have so far:
  HTML:</p>
  
  <pre><code>                &lt;select id='selector'&gt;
                      &lt;option value='option-1' id="opt1"&gt;Option 1&lt;/option&gt;
                      &lt;option value='option-2' id="opt2"&gt;Option 2&lt;/option&gt;
                      &lt;option value='option-3' id="opt3"&gt;Option 3&lt;/option&gt;
                  &lt;/select&gt;
  
  
  
                  &lt;form action="" method="post" id="form1" class="form"&gt;
                      &lt;input id="input_1" name="input_1" type="text"/&gt;
                      &lt;input id="input_2" name="input_2" type="text"/&gt;
                      &lt;input id="input_3" name="input_3" type="text"/&gt;
                  &lt;/form&gt;​
  
                  &lt;form action="" method="post" id="form2" class="form"&gt;
                      &lt;input id="input_4" name="input_1" type="text"/&gt;
                      &lt;input id="input_5" name="input_2" type="text"/&gt;
                      &lt;input id="input_6" name="input_3" type="text"/&gt;
                  &lt;/form&gt;​
  
                  &lt;form action="" method="post" id="form3" class="form"&gt;
                      &lt;input id="input_7" name="input_1" type="text"/&gt;
                      &lt;input id="input_8" name="input_2" type="text"/&gt;
                      &lt;input id="input_9" name="input_3" type="text"/&gt;
                  &lt;/form&gt;​
  </code></pre>
  
  <p>and jquery:</p>
  
  <pre><code>    $select.change(function(){
          if($(this).val() == "opt1"){
              if($('#form1').is(":hidden")){
                  $('#form1').show();            
              }        
              $('#form2').hide();
              $('#form3').hide(); 
          }
          if($(this).val() == "opt2"){
              if($('#form2').is(":hidden")){
                  $('#form2').show();            
              }
              $('#form1').hide();
              $('#form3').hide(); 
          }
          if($(this).val() == "option3"){
              if($('#form3').is(":hidden")){
                  $('#form3').show();            
              }
              $('#form1').hide();
              $('#form2').hide(); 
          }     
      });
  </code></pre>
  
  <p>I want to use it for different contact types, eg. "get a quote", "general enquiry", "post a feedback" - unless you have better idea of doing this. Appreciate your time and help.</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/tucado/cBCTm/" rel="nofollow">here</a></p>
  
  <p>The problem here is that this doesn't work. It displays all forms in the same time and #selector doesn't affect the visibility of any of them at all.</p>