jQuery-实现省市联动

MaGgIeOo0

于 2023-08-18 18:17:12 发布

阅读量289

点赞数 1

分类专栏： web前端基础文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_62971115/article/details/132367197

版权

web前端基础专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.0.js"></script>
    <script>
        $(function () {
            var pro = ["四川", "宁夏", "云南"];
            var cit = [["成都", "德阳"], 
                       ["银川", "吴忠"], 
                       ["大理", "曲靖"]];
                console.log(cit[0][0]);
            //遍历一维数组得到里面的值放入属性值name为province的下拉列表中
            for (var i = 0; i < pro.length; i++) {
                $("[name=province]").append("<option name='prov'>" + pro[i] + "</option>");
            }

            //点击属性值name为province的下拉列表选中其中一个省则name="city"的列表中显示其对应的城市
            $("[name=province]").change(function () {
                //清理
                $("[name=city]").html("<option>请选择</option>");

                //找到省份的value值的索引
                var index = -1;
                for (var i = 0; i < pro.length; i++) {
                    if (pro[i] == $("[name=province]").val()) {
                        index = i;
                        break;
                    }
                }
                //根据省份索引找到对应城市
                var city = cit[index];
                for (var i = 0; i < city.length; i++) {
                    var test = $("<option>" + city[i] + "</option>");
                    $("[name=city]").append(test);
                }

            });

        });

    </script>
</head>

<body>
    <select name="province">
        <option>请选择</option>
    </select>省
    <select name="city">
        <option>请选择</option>
    </select>市
</body>

</html>