三级下拉列表 select 网页 html5

一、效果展示

1. 页面展示。
   

2. 点击显示，显示所选中的学院、专业、班级。
   

二、js代码。

<script type="text/javascript">
        $(function() {
            function objInit(obj) {
                if (obj=="#profession") {
                    return $(obj).html("<option>--- 请选择 所在专业 ---</option>");
                }
                if (obj=="#class") {
                    return $(obj).html("<option>--- 请选择 所在班级 ---</option>");
                }   
            }
            var arrData = {
                人工智能与大数据学院: {
                    软件工程: "1 班, 2 班,3 班, 4 班",
                    物联网工程: "1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班",
                    计算机科学与技术: "1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班, 8 班,9 班, 10 班,11 班, 12 班",
                    数据科学与大数据技术: "1 班, 2 班,3 班, 4 班,5 班",
                    机器人工程: "1 班, 2 班,3 班",
                    大数据:"1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班, 8 班,9 班, 10 班"
                } ,
                经济管理学院: {
                    会计学: "1 班, 2 班,3 班, 4 班",
                    国际经济与贸易: "1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班",
                    工商管理: "1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班, 8 班,9 班, 10 班,11 班, 12 班",
                    人力资源: "1 班, 2 班,3 班, 4 班,5 班, 6 班",
                    资产评估: "1 班, 2 班,3 班, 4 班",
                    市场营销: "1 班, 2 班,3 班, 4 班,5 班, 6 班",
                    电子商务: "1 班, 2 班,3 班"
                } ,
                人文学院: {
                    法学专业: "1 班, 2 班,3 班, 4 班",
                    英语专业: "1 班, 2 班,3 班",
                    中文专业: "1 班, 2 班,3 班, 4 班",
                    汉语国际教育: "1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班, 8 班",
                    文化产业管理: "1 班, 2 班",
                    汉语言文学: "1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班, 8 班,9 班"
                } ,
                土木工程学院: {
                    工程造价: "1 班, 2 班,3 班, 4 班,5 班",
                    城市水系统工程: "1 班, 2 班,3 班, 4 班",
                    铁道工程: "1 班, 2 班,3 班",
                    土木工程: "1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班, 8 班,9 班, 10 班,11 班, 12 班"
                } ,
                建筑管理学院: {
                    工程造价: "1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班, 8 班",
                    工程管理: "1 班, 2 班,3 班, 4 班,5 班, 6 班",
                    房地产开发与管理: "1 班, 2 班,3 班",
                    智能建造: "1 班, 2 班,3 班, 4 班"
                } ,
                艺术与传媒学院: {
                    播音主持与艺术: "1 班, 2 班,3 班",
                    新闻传媒: "1 班, 2 班,3 班, 4 班,5 班, 6 班",
                    表演舞蹈: "1 班, 2 班,3 班, 4 班,5 班",
                    新媒体运营: "1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班",
                    广播电视编导: "1 班, 2 班,3 班, 4 班,5 班班, 6 班,7 班, 8 班,9 班, 10 班,11 班, 12 ",
                    艺术雕塑设计: "1 班, 2 班,3 班"
                } ,
                电气工程与智能制造学院: {
                    机械设计制造及其自动化: "1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班, 8 班,9 班, 10 班,11 班, 12 班",
                    机械电子工程: "1 班, 2 班,3 班, 4 班",
                    电气工程及其自动化: "1 班, 2 班,3 班, 4 班,5 班",
                    电气工程与智能控制: "1 班, 2 班,3 班, 4 班,5 班, 6 班,7 班, 8 班,9 班, 10 班",
                    电缆工程: "1 班, 2 班,3 班, 4 班",
                    电机电器智能化: "1 班, 2 班"
                }
            };
            $.each(arrData, function(pf) {    
                   $("#college").append("<option>" + pf + "</option>")                                               
            });
                
            $("#college").change(function() {
                    objInit("#profession");
                    objInit("#class");
                    $.each(arrData, function(pF, pS) {    
                        if ($("#college option:selected").text() == pF) {
                            $.each(pS, function(pT, pC){
                                $("#profession").append("<option>" + pT + "</option>>");
                            });
                            $("#profession").change(function() {
                                objInit("#class");
                                $.each(pS, function(pT, pC){
                                    if ($("#profession option:selected").text() == pT) {
                                        $.each(pC.split(","), function() {    
                                            $("#class").append("<option>" + this + "</option>")
                                        });
                                    }
                                })
                            })
                        }
                    });
                });
            $("#Button").click(function() {
                    var _college = $("#college option:selected").text();
                    var _profession = $("#profession option:selected").text();
                    var _class = $("#class option:selected").text();
                    $("#div_show")
                    .show()
                    .html("学院："+_college+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;专业："+
                                _profession+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;班级："+
                                _class);
                })
        })
    </script>

三、html代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>三级下拉列表</title>
    <style type="text/css">
        .choose{
            margin-top: 200px;
            margin-left: 300px;
        }
    </style>
</head>
<body>

    <div class="choose">
        <select id="college" name="college"><option value="null">--- 请选择 所在学院 ---</option></select>
        <select id="profession" name="profession"><option value="null">--- 请选择 所在专业 ---</option></select>
        <select id="class" name="class"><option value="null">--- 请选择 所在班级 ---</option></select>
        <input type="button" id="Button" value="显示">
    </div>
    <div class="choose" id="div_show"></div>

</body>
</html>

四、重点！！！：

1. 部分js代码未做展示，复制本文代码进行拼接，无法达到目的效果。如需完整版代码请在链接中下载。

五、下载链接。

链接: 三级下拉列表 select 网页 html5.

六、声明。

文章属于原创，如需引用请@作者，并注明出处！