Как я могу создать несколько вкладок на основе выпадающего списка, используя javascript?

Question

Я отправляю этот вопрос, потому что нигде не смог найти определенного ответа или способа сделать это. Что я хочу сделать, так это то, что я создал выпадающий список, названный «Number of Chasis». Теперь в соответствии с выпадающим списком, выбранным в этом поле («1» или «2»), я хочу одну вкладку «UUT1», если пользователь выбирает «1» в раскрывающемся списке, и мне нужны две вкладки «UUT1» и «UUT2», если пользователь выбирает «2» в раскрывающемся списке. И затем при нажатии на вкладки UUT1 и UUT2, если хотите отобразить шаблон, который я определил ниже. Прикрепление части html здесь, а также скриншот потенциально того, что я ищу.

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

Answer 1

Пожалуйста, обратитесь ниже код. Также, пожалуйста, найдите ссылку скрипта в комментарии. Если вам нужна дополнительная помощь, создайте скрипку вашего примера.

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