更改基于HTML的选项卡选择值

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

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

<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>

什么我需要得到这个功能？在此先感谢。

来源

2013-03-17 user1400396

我把小提琴放在一起 http://jsfiddle.net/newL1406/VcFwd/1/ – user1400396 2013-03-17 11:56:16

我建议使用jQuery Library来轻松操纵DOM。学习起来非常简单，高效节省时间。它还将节省您在跨浏览器代码问题上很多头痛...

来源

2013-03-17 11:49:06

我已经改变了你的HTML一点点，添加ID选择标记并更改选项值的值。如果您正在使用jQuery，这将工作

<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(); 
});

来源

2013-03-17 12:05:52 Vitthal

不太合适。它显示每个选项卡的所有内容。 – user1400396 2013-03-17 12:26:56

已编辑的Jquery代码...现在检查！ – Vitthal 2013-03-17 13:06:04

您需要根据您选择列表上的onchange事件处理程序，但你首先需要给它一个ID。然后使用所选项目的值作为链接的索引以使选项卡处于活动状态，您可以使用JQuery。

<select id="someSelect">

你还需要在导航标签ul上的ID。这将允许您在选择不同的选项卡时查看突出显示的选项卡按钮。

<ul id="someNavTabs" class="nav nav-tabs">

然后你就可以使用JavaScript如下：

document.getElementById('someSelect').onchange = function() { 
    var selectedValue = this.options[this.selectedIndex].value; 
    var selectedIndex = selectedValue; // added this variable for clarity 
    $('#someNavTabs a:eq(' + selectedIndex + ')').tab('show'); 
};

如果你想这样做，不JQuery的则需要更多的代码。

来源

2013-03-17 12:09:01 Stokedout

这很有用，非常感谢。 – user1400396 2013-03-17 12:34:36

很酷，如果这个解决方案是你使用的，然后用左边的勾号标记它作为你的问题的答案 – Stokedout 2013-03-17 16:21:12

更改基于HTML的选项卡选择值

回答

相关问题