JS练习：两级联动

最新推荐文章于 2023-07-09 09:38:20 发布

weixin_34041003

最新推荐文章于 2023-07-09 09:38:20 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/believepd/p/10012642.html

本文详细介绍了一个基于HTML和JavaScript的两级联动下拉菜单的实现方法。通过预定义的省份和城市数据数组，当用户选择省份时，能够动态地显示对应城市的选项。此功能适用于表单或网页中需要地区选择的场景。

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

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>两级联动</title>
    <script>
        //准备数据
        var provinces = [
            ["深圳市", "东莞市", "惠州市", "广州市"],
            ["长沙市", "岳阳市", "株洲市", "湘潭市"],
            ["厦门市", "福州市", "漳州市", "泉州市"]
        ];
        /*
            1. 确定事件: onchange
            2. 函数: selectProvince()
            3:
               得到当前操作元素
               得到当前选中的是那一个省份
               从数组中取出对应的城市信息

               动态创建城市元素节点
               添加到城市select中
        */
        function selectProvince() {
            var province = document.getElementById("province");
            //得到当前选中的是哪个省份
            var value = province.value;
            //从数组中取出对应的城市信息
            var cities = provinces[value];
            var citySelect = document.getElementById("city");
            //清空select中的option
            citySelect.options.length = 0;

            for (var i = 0; i < cities.length; i++) {
                var cityText = cities[i];
                //动态创建城市元素节点 <option>东莞市</option>
                //创建option节点
                var option1 = document.createElement("option"); //<option></option>
                //创建城市文本节点
                var textNode = document.createTextNode(cityText);//东莞市
                //将option节点和文本内容关联起来
                option1.appendChild(textNode);  //<option>东莞市</option>
                //添加到城市select中
                citySelect.appendChild(option1);
            }
        }
    </script>
</head>
<body>
<form action="">
    <!--选择省份-->
    <label for="province"></label>
    <select onchange="selectProvince()" id="province">
        <option value="-1">--请选择--</option>
        <option value="0">广东省</option>
        <option value="1">湖南省</option>
        <option value="2">福建省</option>
    </select>
    <!--选择城市-->
    <label for="city"></label>
    <select id="city"></select>
</form>
</body>
</html>