省市级联动案例

最新推荐文章于 2025-05-22 10:13:24 发布

辛-夷

最新推荐文章于 2025-05-22 10:13:24 发布

阅读量154

点赞数 3

分类专栏： vue案例文章标签： vue.js 学习

本文链接：https://blog.csdn.net/weixin_65450681/article/details/142171229

版权

vue案例专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
    <style>
        .sel {
            width: 180px;
            height: 40px;
        }

        .active {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content">
            <select class="sel" v-model="selectProviData">
                <option v-for="item in provi">{{item}}</option>
            </select>
            <select class="sel" :disabled="citiesData.length==1">
                <option v-for="item in citiesData">{{item}}</option>
            </select>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                citiesData: [],  // 对应二级市区的数据
                provi: ["请输入城市", "北京市", "河北省"],
                cities: [
                    {
                        id: "北京市",
                        city: ["丰台区", "西城区", "海淀区", "昌平区", "朝阳区"]
                    },
                    {
                        id: "河北省",
                        city: ['石家庄市', '唐山市', '保定市', '邯郸市', '邢台市']
                    }
                ],
                selectProviData: '请输入城市'
            },
            watch: {
                selectProviData: {
                    // console.log("val:", val);
                    // 当省份未被选中时   二级赋值为 请选中市区
                    handler(val) {
                        if (val === "请输入城市") {
                            this.citiesData = ["请选择市区"];
                            return;
                        }
                        //当省份被选中时 二级显示对应省份的 市区
                        let citys = this.cities;
                        for (let i in citys) {
                            console.log("i:", i, citys[i]);
                            if (citys[i].id === val) {
                                // 赋值  对应省份的 市区
                                console.log("i:", i, citys[i]);
                                this.citiesData = citys[i].city;
                            }
                        }
                    },
                    immediate: true,
                }
            }
        })
    </script>
</body>

</html>