更改基于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>
什么我需要得到这个功能? 在此先感谢。
我已经改变了你的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();
});
不太合适。它显示每个选项卡的所有内容。 – 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的则需要更多的代码。
这很有用,非常感谢。 – user1400396 2013-03-17 12:34:36
很酷,如果这个解决方案是你使用的,然后用左边的勾号标记它作为你的问题的答案 – Stokedout 2013-03-17 16:21:12
我把小提琴放在一起 http://jsfiddle.net/newL1406/VcFwd/1/ – user1400396 2013-03-17 11:56:16