二级下拉列表联动 select 网页 html5

最新推荐文章于 2024-06-17 17:37:19 发布

小西瓜吖

最新推荐文章于 2024-06-17 17:37:19 发布

阅读量1.9k

点赞数 3

分类专栏： WEB毕设文章标签： html web javascript

本文链接：https://blog.csdn.net/qq_45711481/article/details/123853513

版权

WEB毕设专栏收录该内容

7 篇文章 1 订阅

订阅专栏

二级下拉列表联动 select 网页 html5

写在前面：
一、效果展示。
二、代码。
三、完整版代码，下载链接。
四、声明。

写在前面：

本文只是学院、专业二级选择的联动下拉列。
学院、专业、班级二级选择的联动下拉列，链接如下：
三级下拉列表 select 网页 html5.

一、效果展示。

在这里插入图片描述

二、代码。

html代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="" method="post" name="form_add">
        <table width="100%" class="insert-tab">
            <tr>
                <th width="180px">学院：&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <td>
                    <select id="college" name="college" onChange="getCity()">
                        <option value="0">---请选择 学院：---</option>
                        <option value="人工智能与大数据学院">人工智能与大数据学院</option>
                        <option value="经济管理学院">经济管理学院</option>
                        <option value="人文学院">人文学院</option>
                        <option value="土木工程学院">土木工程学院</option>
                        <option value="建筑管理学院">建筑管理学院</option>
                        <option value="艺术与传媒学院">艺术与传媒学院</option>
                        <option value="电气工程与智能制造学院">电气工程与智能制造学院</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>专业：&nbsp;&nbsp;&nbsp;&nbsp;</th>
                <td>
                    <select id="profession" name="profession">
                        <option value="0">---请选择 专业---</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

js代码。

<script type="text/javascript">
    //定义了专业的二维数组，里面的顺序跟学院的顺序是相同的。通过 selectedIndex 获得学院的下标值来得到相应的专业数组
    var arry_profession=[
        ["软件工程","物联网工程","计算机科学与技术","数据科学与大数据技术","机器人工程","大数据"],
        ["会计学","国际经济与贸易","工商管理","人力资源","资产评估","市场营销","电子商务"],
        ["法学专业","英语专业","中文专业","汉语国际教育","文化产业管理","汉语言文学"],
        ["桥梁建设","城市水系统工程","铁道工程","土木工程"],
        ["工程造价","工程管理","房地产开发与管理","智能建造"],
        ["播音主持与艺术","新闻传媒","表演舞蹈","新媒体运营","广播电视编导","艺术雕塑设计"],
        ["机械设计制造及其自动化","机械电子工程","电气工程及其自动化","电气工程与智能控制","电缆工程","电机电器智能化"]
    ];
    function getCity(){

        //获得学院  下拉框的对象
        var college_1=document.form_add.college;

        //获得专业  下拉框的对象
        var profession_1=document.form_add.profession;

        //得到对应学院的专业数组
        var college_2=arry_profession[college_1.selectedIndex - 1];

        //清空学院下拉框，仅留提示选项
        profession_1.length=1;

        //将专业数组中的值填充到专业下拉框中
        for(var i=0;i<college_2.length;i++){
            profession_1[i+1]=new Option(college_2[i],college_2[i]);
        }
    }
    </script>

css代码。

<style type="text/css">
        table{
            margin-top: 200px;
            margin-left: 300px;
        }
        select{
            height: 29px;
            width: 438px;
            outline: none;
            /*border: none;*/  /*去掉边框*/
            /*color: #277de2;*/  /*字体颜色*/
            border-color: #ccc;
            border-radius:4px;

            /*这个是去除下箭头的*/
            /*appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;*/
        }
        .insert-tab{
            width: 650px;
            border-collapse:collapse;
            border:1px solid #f2f2f2;
        }
        .insert-tab th,.insert-tab td{
            border:0.1px solid #f2f2f2;
        }
        .insert-tab tr{
            line-height:40px;
        }
        .insert-tab th{
            text-align:right;
            font-weight:normal;
            padding-right:10px;
            font-size:14px;}
        .insert-tab td{
            text-align:left;
            padding-left:10px;
            font-family: "华文楷体";
        }
    </style>