title: show/hide multiple select boxes using jquery
body: <p>I have some problem with my code so PLEASE if you could help me...
  So I have select box and when I chose first option i need to show some div with some forms, and if I chose second option i need to show another select box.. So that every option from that other select box could show two different forms...
  So here is my html:</p>
  
  <pre><code>&lt;select id="customer-chose" data-placeholder="Choose"&gt;
      &lt;option value="0" default selected=""&gt;Choose&lt;/option&gt;
      &lt;option value="current"&gt;1&lt;/option&gt;
      &lt;option value="not" class="next"&gt;2&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="user" class="opt"&gt;
      &lt;option value="0" disabled selected class="not"&gt;Chose&lt;/option&gt;
      &lt;option value="1" class="not"&gt;1a&lt;/option&gt;
      &lt;option value="2" class="not"&gt;2a&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="current" class="customer" style="display:none"&gt;
      &lt;form&gt;
          First name: &lt;input type="text" name="firstname"&gt;&lt;br&gt;
          Last name: &lt;input type="text" name="lastname"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my jQuery:</p>
  
  <pre><code>$(document).ready(function() {
      $('#user').hide();
      $('#customer-chose').change(function(){
          $('.customer').hide();
          $('#' + $(this).val()).show();
      });
      $('#customer-chose').change(function() {
          if($(this).data('options') == undefined){
              $(this).data('options', $('#user option').clone());
          }
          $('#customer-chose option').click(function(){
              $("#user").hide();
          });
          if($('#customer-chose option:selected')) {
              $("#user").show();
          } else {
          $("#user").hide();
          }
          var id = $(this).val();
          var options = $(this).data('options').filter('[class=' + id + ']');
          $("#user").html(options);
      });
      $('#user').change(function(){
          $('.customer').hide();
          $('#' + $(this).val()).show();
      });
  });
  </code></pre>
  
  <p>And here is fiddle: <a href="http://jsfiddle.net/9ARmX/" rel="nofollow">http://jsfiddle.net/9ARmX/</a></p>
  
  <p>This code is working but only in Firefox...I need to work in all browsers... </p>