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

Question

В нижеприведенном приложении, которое я создал, чтобы захватить ввод пользователя и загрузить его в виде текстового файла. Я столкнулся с проблемой. Я не могу отобразить «Chasis 1» и «Chasis 2» на основании выбора, сделанного в выпадающем списке «Number of Chasis». Например, если «Number of Chasis» == 1, я хочу только вкладку «Chasis 1», а если «Number of Chasis» == 2, то я хочу, чтобы «Chasis 1» и «Chasis 2» не выбирались в выпадающем списке. Я не хочу, чтобы там отображалась какая-либо вкладка. Я не могу реализовать последнюю часть этого требования. Привязка jquery, javascript, а также html, который я использовал для реализации этого.

$(document).ready(function($) {
    function displaySelectedTabs(selectedNumber){
        switch(selectedNumber){
            case "":
            $("#tab1btn").hide();
            $("#tab1").hide();
            $("#tab2btn").hide();

            case "1":
            $("#tab1btn").show();
            $("#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);
    });
});

$('#tab1').on('click', 'a', function(e) {
    e.preventDefault();
});

Вот мой HTML

<fieldset >
    <label for='Chasis Input'><strong>Number of Chasis</strong></label>
    <select id="tabsToDisplay" 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>

<div class="tab">
    <button  id= "tab1btn" >Chasis 1</button>
    <button  id= "tab2btn" >Chasis 2</button>  
</div>