title: change Tab based on HTML Select value
body: <p>Could someone help me connect these bits of code.  I'm using Twitter bootstrap and I have a Dropdown list and when the user selects an item in the dropdown list I want to show the tab that corresponds to the item selected.</p>
  
  <p>Here's my html code so far...</p>
  
  <pre><code>   &lt;select&gt;
       &lt;option&gt;Select...&lt;/option&gt;
       &lt;option value=1&gt;Individual Investor&lt;/a&gt;&lt;/option&gt;
       &lt;option value=1&gt;Joint Investors&lt;/option&gt;
       &lt;option value=3&gt;Company Investor&lt;/option&gt;
       &lt;option value=1&gt;Trust (Individual Trustees)&lt;/option&gt;
       &lt;option value=2&gt;Trust (Corporate Trustees)&lt;/option&gt;         
       &lt;option value=1&gt;SMSF (Individual Trustees)&lt;/option&gt;
       &lt;option value=2&gt;SMSF (Corporate Trustees)&lt;/option&gt;
     &lt;/select&gt;
  
      &lt;div class="tabbable"&gt; &lt;!-- Only required for left/right tabs --&gt;
        &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;&lt;a href="#tab0" data-toggle="tab"&gt;Investor Details&lt;/a&gt;&lt;/li&gt;
          &lt;li class="hidden"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Individuals&lt;/a&gt;&lt;/li&gt;
          &lt;li class="hidden"&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Joint&lt;/a&gt;&lt;/li&gt;
          &lt;li class="hidden"&gt;&lt;a href="#tab3" data-toggle="tab"&gt;Company&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="tab-content"&gt;         
          &lt;div class="active tab-pane" id="tab0"&gt;
            &lt;div class="alert"&gt;               
              Select your Investor Type from the Dropdown list above
            &lt;/div&gt;
              &lt;legend&gt;Investor Details&lt;/legend&gt;
              &lt;label&gt;Select your Investor Type from the Dropdown list above&lt;/label&gt;               
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab1"&gt;
              &lt;legend&gt;Individual Investor Details&lt;/legend&gt;
              &lt;label&gt;First Name&lt;/label&gt;               
              &lt;input class="input-xlarge" type="text" placeholder="First Name"&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab2"&gt;
              &lt;legend&gt;Joint Investor Details&lt;/legend&gt;
              &lt;label&gt;Both Names&lt;/label&gt;               
              &lt;input class="input-xlarge" type="text" placeholder="Enter both Names"&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="tab3"&gt;
              &lt;legend&gt;Company Investor Details&lt;/legend&gt;
              &lt;label&gt;Company Name&lt;/label&gt;             
              &lt;input class="input-xlarge" type="text" placeholder="Enter Company Name"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What do I need to get this to function?
  thanks in advance.</p>