前端下拉框實現聯查（二級聯動，三級聯動）

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

在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;// 拿到的第一個下拉框選中的值（1是Excel，2是PDF） 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>

 

 

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

當【文件類型】選擇EXCEL格式時，【文件格式】只有三個選項：

 

 

當【文件類型】選擇PDF格式時，【文件格式有兩個選項】：

 

 

PS：

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

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

當然，這只是前端數據寫死的情況下，如果是前后端交互數據的話，也是可以的。