<select name="select">
<option selected value="вкладка 1">вкладка 1</option>
<option value="вкладка 2">вкладка 2</option>
</select>
<div>
<div class="active">активная вкладка 1</div>
<div>вкладка 2</div>
</div>
<select>
<option hidden></option>
<option>вкладка 69</option>
<option>вкладка 187</option>
<option>вкладка 666</option>
</select>
<div>
<div class="tab">hello, world!!</div>
<div class="tab">fuck the world</div>
<div class="tab">fuck everything</div>
</div>.tab {
display: none;
}
.tab.active {
display: block;
}document.querySelector('select').addEventListener('change', function() {
document.querySelectorAll('.tab').forEach((n, i) => {
n.classList.toggle('active', i === this.selectedIndex - 1);
});
});
<body>
<form>
<select name="select">
<option value="0">вкладка 1</option>
<option value="2">вкладка 2</option>
<option value="3">вкладка 3</option>
<option value="4">вкладка 4</option>
<option value="5">вкладка 5</option>
</select>
</form>
<div id="tabs">
<div class="active tab">активная вкладка 1</div>
<div class="tab">вкладка 2</div>
<div class="tab">вкладка 3</div>
<div class="tab">вкладка 4</div>
<div class="tab">вкладка 5</div>
</div>
<script>
const select = document.querySelector('select');
select.onchange = () => {
tabs.querySelector('.active').classList.remove('active');
tabs.querySelectorAll('.tab')[select.options.selectedIndex].classList.add('active');
}
</script>
</body>