更改基於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的選項卡選擇值

回答

相關問題