下拉列表省市联动

最新推荐文章于 2024-12-29 19:27:09 发布

꧁惜若༒奔已꧂

最新推荐文章于 2024-12-29 19:27:09 发布

阅读量101

点赞数

文章标签： java 算法

惜若

本文链接：https://blog.youkuaiyun.com/qq_69581907/article/details/130368392

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>

    <script>
        //定义一维数组(省)
        var arr1 = ["江西","广东","广西"];

        //定义空的二维数组(市区)
        var city = [];
        //在实例化二维数组中的一维数组
        city["江西"] = ["南昌","赣州","上饶","九江"];
        city["广东"] = ["广州","珠海","深圳","中山"];
        city["广西"] = ["成都","乐山","绵阳","攀枝花"];


        <!--循环遍历数组-->
        function traverse (arry,id) {
            //清空下拉列表框中的所有选项
            id.innerHTML = "";
            //循环遍历数组
            for (i = 0;i<arry.length;i++) {
                id.innerHTML += "<option>"+arry[i]+"</option>";
            }
        }

        //定义下拉列表选择改变的方法
        function getCity () {
            //获取下拉列表的省份，然后做为下标
            var index = selProvince.value;
            //通过省份下标从city二维数组中获取对应的城市
            traverse(city[index],selCity);
        }
    </script>
</head>
<body>
    <!--省份数组-->
    <!--当元素的值发生变化时触发-->
    <select id="selProvince" οnchange="getCity()">
        <script>
            traverse(arr1,selProvince);
        </script>
    </select>省

    <!--市区-->
    <select id="selCity"></select>市

</body>
</html>
<script>getCity()</script>