select联动菜单(点第一个select里面的值的时候，第二个select随着第一个的点击而发生变化)

笑到世界都狼狈

已于 2022-11-11 09:36:00 修改

阅读量3.3k

点赞数

分类专栏： js/jq 文章标签： select联动菜单两个select标签点击第一个第二个随着第一个发生变化 select的click事件没有反应

于 2019-09-11 08:51:24 首次发布

本文链接：https://blog.csdn.net/qq_36509946/article/details/100725697

版权

js/jq 专栏收录该内容

55 篇文章 4 订阅

订阅专栏

这两天项目中有个查询功能是要做联动菜单，既：我点击第一个下拉列表的查询条件的时候，第二个下拉列表中的内容要变成第一个下拉列表当前值所对应的选项。

思考了几分钟，想到的最简单的方法就是对第二个下拉列表做显示隐藏，当第一个列表发生变化的时候显示该显示的列表，隐藏其他的下拉列表。

在写的过程中遇到一个问题就是select的点击事件没有用，上网查了一个发现select支持onchange事件，不支持click，所有检测select的变化用的是onchange，好了，话不多说，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <style type="text/css">
        select{width:138px;height: 30px;line-height: 30px; border: 1px solid #DBDFEB;}
    </style>
</head>
<body>
    <div class="content">
        <select name="searchType" id="searchType" onchange="func()">
            <option value="0" selected>请选择查询条件</option>
            <option value="1" id="btnEquipmentType">姓名</option>
            <option value="2" id="btnOnline">性别</option>
            <option value="3" id="btnApprovalStatus">年龄</option>
        </select>

        <select name="requre" id="requre">
            <option value="0" selected>请选择查询条件</option>
        </select>

        <select name="equipmentType" id="equipmentType" style="display: none;">
            <option value="0" selected>蜡笔小新</option>
            <option value="1" selected>渣渣前端</option>
        </select>

        <select name="online" id="online" style="display: none;">
            <option value="0" selected>男</option>
            <option value="1">女</option>
        </select>

        <select name="approvalStatus" id="approvalStatus" style="display: none;">
            <option value="0" selected>18</option>
            <option value="1">12</option>
            <option value="2">13</option>
            <option value="3">156</option>
            <option value="4">45</option>
            <option value="5">543</option>
        </select>
    </div>
    <script type="text/javascript">
    /**
     * 自定义表单，点击显示隐藏事件
     * select下拉列表写click事件没用，只能写onchange事件才有反应
     */
    function func(){
        var values = $('#searchType option:selected').val();
        if (values == 0){
            $("#requre").show();
            $("#equipmentType").hide();
            $("#online").hide();
            $("#approvalStatus").hide();
        }
        if (values == 1){
            $("#requre").hide();
            $("#equipmentType").show();
            $("#online").hide();
            $("#approvalStatus").hide();
        }
        if (values == 2){
            $("#requre").hide();
            $("#equipmentType").hide();
            $("#online").show();
            $("#approvalStatus").hide();
        }
        if (values == 3){
            $("#requre").hide();
            $("#equipmentType").hide();
            $("#online").hide();
            $("#approvalStatus").show();
        }
    }
    </script>
</body>
</html>

就这样，一个联动菜单做好了，我的方法用的比较笨，不知道还有什么更简单的方法，欢迎下方留言！！！