title: jQuery toggle div from select option
body: <p>I'm in need to toggle divs from a dropdown select option box. I'd like it similar to <a href="http://www.ryancramer.com/projects/asmselect/examples/example1.html" rel="nofollow noreferrer">asmselect</a> for jquery but instead of listing the option tag I'd like it to display a hidden div. Is there anything like this out there? Or anyone know how to set it up? Thanks, Jeff.</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>Basically what I want is the look and interaction of the asmselect link above though toggling divs instead of generating a list. Example code below:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script type="text/javascript" src="jQuery1.3.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
  
      $("#theSelect").change(function(){          
          $("#theSelect option:selected").click(function(){
              var value = $(this).val();
              var theDiv = $(".is" + value);
  
              $(theDiv).toggle(function(){
                  $(this).removeClass("hidden");
              }),function(){
                  $(this).addClass("hidden");
              }
          }); 
      });
  
  });
  
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
  .hidden {
      display: none;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="selectContainer"&gt;
          &lt;select id="theSelect"&gt;
              &lt;option value=""&gt;- Select -&lt;/option&gt;
              &lt;option value="Patient"&gt;Patient&lt;/option&gt;
              &lt;option value="Physician"&gt;Physician&lt;/option&gt;
              &lt;option value="Nurse"&gt;Nurse&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="hidden isPatient"&gt;Patient&lt;/div&gt;
      &lt;div class="hidden isPhysician"&gt;Physician&lt;/div&gt;
      &lt;div class="hidden isNurse"&gt;Nurse&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>