title: update labels based on selection with jQuery
body: <p>I have a drop-down selector and form fields below. I need to be able to display form labels and corresponding form fields based on selected option. </p>
  
  <p>What is the best way to implement this: prepare possible labels and fields and forms elements and store them in hidden divs and then show/hide based on selection?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
      $('#mySelector').change(function(){            
           $('.opt').hide();
           $('#' + $(this).val()).toggle();
      });
  });
  &lt;/script&gt;
  
  &lt;select id="mySelector"&gt;
     &lt;option value="o1"&gt;Car details
     &lt;option value="o2"&gt;Boat details
     &lt;option value="o3"&gt;Train details
  &lt;/select&gt;
  
  &lt;div id="o1" class="opt"&gt;
      &lt;label for="f1_1"&gt;Car speed&lt;/label&gt;
      &lt;input id="f1_1" type="text"&gt;
      &lt;br&gt;
      &lt;label for="f1_2"&gt;Car color&lt;/label&gt;
      &lt;input id="f1_2" type="text"&gt;
  &lt;/div&gt;
  
  &lt;div id="o2" class="opt"&gt;
      &lt;label for="f2_1"&gt;Boat size&lt;/label&gt;
      &lt;input id="f2_1" type="text"&gt;
      &lt;br&gt;
      &lt;label for="f2_2"&gt;Boat weight&lt;/label&gt;
      &lt;input id="f2_2" type="text"&gt;
  &lt;/div&gt;
  
  &lt;div id="o3" class="opt"&gt;
      &lt;label for="f3_1"&gt;Train length&lt;/label&gt;
      &lt;input id="f3_1" type="text"&gt;
      &lt;br&gt;
      &lt;label for="f3_2"&gt;Train cargo&lt;/label&gt;
      &lt;input id="f3_2" type="text"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I assume jQuery is the best way to go...</p>
  
  <p>Also, I will display this 3 times, once for each option. I need some sort of mechanist to prevent selecting the same option that has been selected above. Is it possible?</p>