前端下拉框实现联查（二级联动，三级联动）

时间：2021-01-04 10:54:33 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：第一个 element 就是 image 图片 label 问题 exce 个人

本次写的也算是困扰我一段时间的一个小问题，也是为还在因此而困扰的朋友提供一个解决方案。

在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;
        }
    }