HTML 二级联动

最新推荐文章于 2021-07-12 18:33:15 发布

原创最新推荐文章于 2021-07-12 18:33:15 发布 · 753 阅读

2 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用HTML和JavaScript实现二级联动效果，通过示例代码展示如何创建下拉菜单并根据父级选项动态改变子级选项的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动</title>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        #div1 {
            height: 200px;
            width: 300px;
            background-color: yellowgreen;
            text-align: center;
            padding-top: 30px;
        }
    </style>
</head>
<body>
<div id="div1">
    <select id="province">
        <option value="0" selected>-请选择-</option>
    </select>省
    <select id="city">
        <option value="0" selected>-请选择-</option>
    </select>市
</div>

<script>
    var pro = ["河南", "山东", "黑龙江"];
    var city = [
        ["郑州", "开封", "新政", "濮阳", "平顶山", "洛阳", "三门峡"],
        ["济南", "日照", "烟台", "德州", "聊城"],
        ["哈尔滨", "齐齐哈尔", "佳木斯", "牡丹江"]
    ];

    $(function () {
        for (var i = 0; i < pro.length; i++) {
            $('#province').append($('<option></option>').val(i+1).html(pro[i]))//向尾部添加内容,首先对province添加  option标签，之后直接给标签设置value值和文本值
        }
//      请选择那个 option 标签的 value 值为 0,所以以后添加的value值都要加一
        //给province添加事件
        $('#province').change(function(){
            var i = $(this).val();
            // $('#city').empty();
            $('#city').prop('length',1);//每次重新选择省份的时候，都要把城市的下拉列表的长度设为一，只保留 --请选择这一行文本的标签
            for(var j=0;j<city[i-1].length;j++){
                $('#city').append($('<option></option>').val(j+1).html(city[i-1][j]))//存储城市的数组为一个二维的数组，注意取值
            }

        });
    })
</script>
</body>
</html>