根据HTML选择值更改选项卡 [英] change Tab based on HTML Select value

问题描述

有人可以帮我连接这些代码。我正在使用Twitter引导程序，我有一个下拉列表，当用户选择下拉列表中的项目时，我想显示与所选项目对应的选项卡。

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.

这是我到目前为止的html代码......

Here's my html code so far...

   <select>
     <option>Select...</option>
     <option value=1>Individual Investor</a></option>
     <option value=1>Joint Investors</option>
     <option value=3>Company Investor</option>
     <option value=1>Trust (Individual Trustees)</option>
     <option value=2>Trust (Corporate Trustees)</option>         
     <option value=1>SMSF (Individual Trustees)</option>
     <option value=2>SMSF (Corporate Trustees)</option>
   </select>

    <div class="tabbable"> <!-- Only required for left/right tabs -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab0" data-toggle="tab">Investor Details</a></li>
        <li class="hidden"><a href="#tab1" data-toggle="tab">Individuals</a></li>
        <li class="hidden"><a href="#tab2" data-toggle="tab">Joint</a></li>
        <li class="hidden"><a href="#tab3" data-toggle="tab">Company</a></li>
      </ul>
      <div class="tab-content">         
        <div class="active tab-pane" id="tab0">
          <div class="alert">               
            Select your Investor Type from the Dropdown list above
          </div>
            <legend>Investor Details</legend>
            <label>Select your Investor Type from the Dropdown list above</label>               
        </div>
        <div class="tab-pane" id="tab1">
            <legend>Individual Investor Details</legend>
            <label>First Name</label>               
            <input class="input-xlarge" type="text" placeholder="First Name">
        </div>
        <div class="tab-pane" id="tab2">
            <legend>Joint Investor Details</legend>
            <label>Both Names</label>               
            <input class="input-xlarge" type="text" placeholder="Enter both Names">
        </div>
        <div class="tab-pane" id="tab3">
            <legend>Company Investor Details</legend>
            <label>Company Name</label>             
            <input class="input-xlarge" type="text" placeholder="Enter Company Name">
        </div>
      </div>
    </div>

我需要什么来实现这个功能？
提前感谢。

What do I need to get this to function? thanks in advance.

推荐答案

我已经更改了一点点HTML，添加了ID来选择标签并更改了选项值的值。
如果您使用的是Jquery，这将有效

I have changed your HTML a little-bit, added ID to select tag and changed the values of options values. If you are using Jquery this will work

  <select id="dropDown">
     <option>Select...</option>
     <option value="tab1">Individual Investor</a></option>
     <option value="tab2">Joint Investors</option>
     <option value="tab3">Company Investor</option>
     <option value="tab4">Trust (Individual Trustees)</option>
     <option value="tab5">Trust (Corporate Trustees)</option>         
     <option value="tab6">SMSF (Individual Trustees)</option>
     <option value="tab7">SMSF (Corporate Trustees)</option>
   </select>

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab0" data-toggle="tab">Investor Details</a></li>
    <li class="hidden"><a href="#tab1" data-toggle="tab">Individuals</a></li>
    <li class="hidden"><a href="#tab2" data-toggle="tab">Joint</a></li>
    <li class="hidden"><a href="#tab3" data-toggle="tab">Company</a></li>
  </ul>
  <div class="tab-content">         
    <div class="active tab-pane" id="tab0">
      <div class="alert">               
        Select your Investor Type from the Dropdown list above
      </div>
        <legend>Investor Details</legend>
        <label>Select your Investor Type from the Dropdown list above</label>               
    </div>
    <div class="tab-pane" id="tab1">
        <legend>Individual Investor Details</legend>
        <label>First Name</label>               
        <input class="input-xlarge" type="text" placeholder="First Name">
    </div>
    <div class="tab-pane" id="tab2">
        <legend>Joint Investor Details</legend>
        <label>Both Names</label>               
        <input class="input-xlarge" type="text" placeholder="Enter both Names">
    </div>
    <div class="tab-pane" id="tab3">
        <legend>Company Investor Details</legend>
        <label>Company Name</label>             
        <input class="input-xlarge" type="text" placeholder="Enter Company Name">
    </div>
  </div>
</div>

JQUERY

$("#dropDown").change(function() {          
        var value = $("#dropDown option:selected").val();
        $('#tabbable li).find(a[href=#'+value+']').click();
});​

这篇关于根据HTML选择值更改选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！