如何使用javascript基于下拉选择创建多个选项卡?
我发布这个问题是因为我在任何地方都找不到明确的答案或方法。我想做的是,我创建了一个名为“Chasis数”的下拉列表。现在,根据在此字段中选择的下拉列表(“1”或“2”),如果用户在下拉列表中选择“1”,我需要一个选项卡“UUT1”,如果用户在下拉列表中选择“2”,我需要两个选项卡“UUT1”和“UUT2”。然后单击UUT1和UUT2选项卡,如果想要显示我在下面定义的模板。在这里附加html部分,还有我正在寻找的可能的屏幕截图如何使用javascript基于下拉选择创建多个选项卡?,javascript,html,css,Javascript,Html,Css,我发布这个问题是因为我在任何地方都找不到明确的答案或方法。我想做的是,我创建了一个名为“Chasis数”的下拉列表。现在,根据在此字段中选择的下拉列表(“1”或“2”),如果用户在下拉列表中选择“1”,我需要一个选项卡“UUT1”,如果用户在下拉列表中选择“2”,我需要两个选项卡“UUT1”和“UUT2”。然后单击UUT1和UUT2选项卡,如果想要显示我在下面定义的模板。在这里附加html部分,还有我正在寻找的可能的屏幕截图 <fieldset id='extra'
<fieldset id='extra'>
<h6>Additional Details Required for Controller A</h6>
<label for='Controller_ID1'>Controller_ID:</label>
<select name='Controller_ID1' required>
<option value=""> - Select the Controller ID - </option>
<option value='A'>A </select>
<label for='iSCSI1'>iSCSI IPs:</label><input type='text' name='iSCSIip1' id="ip1" placeholder='Enter iSCSI ips' disabled="disabled" />
<label for='HBA_Ports_A'>HBA_Ports:</label><input type='text' id="hba" name='hba_ports1' placeholder='Enter the HBA Ports' disabled="disabled" />
<label for='MC_IP_A'>MC_IP:</label><input type='text' name='extra_ip1' placeholder='Enter the MC_IP' />
<label for='MC_Netmask_A'>MC_Netmask:</label><input type='text' name='netmask_ip1' placeholder='Enter the MC_Netmask' />
<label for='MC_Gateway_A'>MC_Gateway:</label><input type='text' name='gateway_ip1' placeholder='Enter the MC_Gateway' />
<label for='MC_A'>MC:</label><input type='text' name='rbod_mc1' placeholder='Enter the MC Port' onkeypress="return (event.charCode > 64 &&
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
<label for='SC_A'>SC:</label><input type='text' name='rbod_sc1' placeholder='Enter the SC Port' onkeypress="return (event.charCode > 64 &&
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
<label for='FU_A'>FU:</label><input type='text' name='rbod_fu1' placeholder='Enter the FU Port' onkeypress="return (event.charCode > 64 &&
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)"/>
<label for='EC_A'>EC:</label><input type='text' name='rbod_ec1' placeholder='Enter the EC Port' onkeypress="return (event.charCode > 64 &&
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
<br>
<br>
<h6>Additional Details Required for Controller B</h6>
<label for='Controller_ID'>Controller_ID:</label>
<select name='Controller_ID' id="ctlid" required>
<option value=""> - Select the Controller ID - </option>
<option value='B'>B </select>
<label for='iSCSI2'>iSCSI IPs:</label><input type='text' name='iSCSIip2' id="ip2" placeholder='Enter iSCSI ips' disabled="disabled" />
<label for='HBA_Ports'>HBA_Ports:</label><input type='text' id="hba1" name='hba_ports' placeholder='Enter the HBA Ports' disabled="disabled" />
<label for='MC_IP'>MC_IP:</label><input type='text' name='extra_ip' id='mcip' placeholder='Enter the MC_IP' />
<label for='MC_Netmask'>MC_Netmask:</label><input type='text' name='netmask_ip' id="netmaskip" placeholder='Enter the MC_Netmask' />
<label for='MC_Gateway'>MC_Gateway:</label><input type='text' name='gateway_ip' id="gatewayip" placeholder='Enter the MC_Gateway' />
<label for='MC'>MC:</label><input type='text' name='rbod_mc' placeholder='Enter the MC Port' id="rbodmc"onkeypress="return (event.charCode > 64 &&
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
<label for='SC'>SC:</label><input type='text' name='rbod_sc' placeholder='Enter the SC Port' id="rbodsc" onkeypress="return (event.charCode > 64 &&
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
<label for='FU'>FU:</label><input type='text' name='rbod_fu' placeholder='Enter the FU Port' id="rbodfu" onkeypress="return (event.charCode > 64 &&
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
<label for='EC'>EC:</label><input type='text' name='rbod_ec' placeholder='Enter the EC Port' id="rbodec" onkeypress="return (event.charCode > 64 &&
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
</fieldset>
</template>
<fieldset>
<label for='Chasis Input'><strong>Number of Chasis</strong></label>
<select input type='text' name='chassis' required >
<option value=""> - Number of Controllers - </option>
<option data-extra=true value='1'>1
<option data-extra=true value='2'>2
</select>
</fieldset>
<fieldset>
<label for='Number of Controllers'><strong>Number of Controllers</strong></label>
<select input type='text' name='ctrls' onchange="EnableDisableDropDown(this);" required >
<option value=""> - Number of Controllers - </option>
<option data-extra=true value='1'>1
<option data-extra=true value='2'>2
</select>
</fieldset>
控制器A所需的其他详细信息
控制器ID:
-选择控制器ID-
A.
iSCSI IP:
HBA_端口:
MC_IP:
MC_网络掩码:
MC_网关:
司仪:
SC:
傅:
欧共体:
控制器B所需的其他详细信息
控制器ID:
-选择控制器ID-
B
iSCSI IP:
HBA_端口:
MC_IP:
MC_网络掩码:
MC_网关:
司仪:
SC:
傅:
欧共体:
裂缝数量
-控制器数量-
1.
2.
控制器数量
-控制器数量-
1.
2.
请参考下面的代码。也请在评论中找到fiddle链接。如果你需要更多的帮助,请创建你的例子小提琴
<h2>Tabs</h2>
<select id="tabsToDisplay">
<option value="1">1</option>
<option value="2">2</option>
</select><br/><br/>
<div class="tab">
<button class="tablinks" id= "tab1btn" >tab1</button>
<button class="tablinks" id= "tab2btn" >tab2</button>
</div>
<div id="tab1" class="tabcontent">
<h3>Tab1</h3>
<p>You selected tab1</p>
</div>
<div id="tab2" class="tabcontent">
<h3>Tab2</h3>
<p>You selected tab2</p>
</div>
// A $( document ).ready() block.
$( document ).ready(function() {
function displaySelectedTabs(selectedNumber){
switch(selectedNumber){
case "1":
$("#tab2btn").hide();
$("#tab2").hide();
break;
case "2":
$("#tab2btn").show();
break;
}
}
var selectedNumber = $("#tabsToDisplay").val();
displaySelectedTabs(selectedNumber);
function tabClick(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
$("#tab1btn" ).click(function() {
tabClick(event, 'tab1');
});
$("#tab2btn" ).click(function() {
tabClick(event, 'tab2');
});
$( "#tabsToDisplay" ).change(function() {
var selectedNumber = $("#tabsToDisplay").val();
displaySelectedTabs(selectedNumber);
});
});
选项卡
1.
2.
表1
表2
表1
您选择了tab1
表2
您选择了tab2
//$(document).ready()块。
$(文档).ready(函数(){
功能显示SelectedTabs(selectedNumber){
开关(选择的数字){
案例“1”:
$(“#tab2btn”).hide();
$(“#tab2”).hide();
打破
案例“2”:
$(“#tab2btn”).show();
打破
}
}
var selectedNumber=$(“#tabsToDisplay”).val();
显示SelectedTabs(selectedNumber);
功能选项卡单击(evt,cityName){
var i,tabcontent,tablinks;
tabcontent=document.getElementsByClassName(“tabcontent”);
对于(i=0;i
你能用一个可复制的例子分享一个链接吗。