本次寫的也算是困擾我一段時間的一個小問題，也是為還在因此而困擾的朋友提供一個解決方案。

在HTML中寫兩個下拉框：

<div class='fields'>
    <div class='field'>
        <label class="ep_lable " style="width:100px">檔案型別</label>
    </div>
    <div class='field'>
        <select class="wjlx" style="width: 200px" id="demo" onchange="fn()">
            <option value="1">Excel</option>
            <option value="2">PDF</option>
        </select>
    </div>
</div>

<div class='fields' id="oneone">
    <div class='field'>
        <label class="ep_lable " style="width:100px">檔案格式</label>
    </div>
    <div class='field'>
        <select class="wjgs" style="width: 200px" id="demo2" >
            <option value="1">標準格式</option>
            <option value="2">扣繳個人所得稅報告表格式</option>
            <option value="3">工資表格式</option>
        </select>
    </div>
    <br><br>
    <div id="three">
        <input type="radio" name="optionPrint" value="heng" checked>橫向列印
        <input type="radio" name="optionPrint" value="zong">縱向列印
    </div>
</div>

然後在JS當中寫個方法

<script>

function fn(){
        var type = document.getElementById("demo");// 第一個下拉框
        var t = type.value;

        switch (t) {
            case "1":
                var html = "<option value='1'>標準格式</option><option value='2'>扣繳個人所得稅報告表格式</option><option value='3'>工資表格式</option>";
                $(
 
"#demo2").html(html);
                $('#three').hide();
                break;
            case "2":
                var html ="<option value='1' selected>工資表格式</option><option value='2'>扣繳個人所得稅報告表格式</option>";
                $("#demo2").html(html);
                $('#three').show();
                break;
        }
    }

</script>

這樣子兩級聯動就完成了。可以看下效果

PS：

然後這當中用的主要就是onchange方法，第二下拉框隨著第一個改變。

同理 如果是三表聯動 需要在第二個下拉框中加上onchange 聯動第三個。

當然，這只是前端資料寫死的情況下，如果是前後端互動資料的話，也是可以的。