Kindly see the code snippet below. Additionally, there is a fiddle link provided in the comments for reference. If further assistance is required, please create a fiddle with your specific example.
<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've selected tab1</p>
</div>
<div id="tab2" class="tabcontent">
<h3>Tab2</h3>
<p>You've selected tab2</p>
</div>
// Initiating functions when document is ready.
$( 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);
});
});