[Vue]实现城市选择三级联动

最新推荐文章于 2023-01-12 13:25:45 发布

iChangebaobao

最新推荐文章于 2023-01-12 13:25:45 发布

阅读量316

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/iChangebaobao/article/details/103609533

版权

Vue 专栏收录该内容

74 篇文章 1 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>城市选择三级联动</title>
</head>

<body>
    <div id="app" v-cloak>
        <select v-model="prov" @click="updateCity">
            <option v-for="(v,i) in arr" :key="i">{{v.name}}</option>
        </select>
        <select v-model="city" @click="updateDistrict">
            <option v-for="(v,i) in cityArr" :key="i">{{v.name}}</option>
        </select>
        <select v-model="district" v-if="district">
            <option v-for="(v,i) in districtArr" :key="i">{{v.name}}</option>
        </select> 
    </div>
    <script src="../../js/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                arr: [
                    {
                        name: '北京',
                        sub: [
                            { name: '请选择', sub: [] },
                            {
                                name: '北京', sub: [
                                    { name: '东城区' }, { name: '西城区' }, { name: '崇文区' }, { name: '朝阳区' }, { name: '石景山区' }, { name: '房山区' }
                                ]
                            },

                        ]
                    },{
                        name:'广东省',
                        sub:[
                            { name: '请选择', sub: [] },
                            {
                                name: '广州市', sub: [
                                    { name: '荔湾区' }, { name: '越秀区' }, { name: '海珠区' }, { name: '天河区' }, { name: '白云区' }, { name: '黄埔区' },{name:'番禺区'}
                                ]
                            },
                            {
                                name: '深圳市', sub: [
                                    { name: '罗湖区' }, { name: '福田区' }, { name: '南山区' }, { name: '宝安区' }, { name: '龙岗区' }, { name: '盐田区' },{name:'番禺区'}
                                ]
                            }

                        ]
                    }
                ],
                prov: '北京',//当前省
                city: '北京',//市
                district:'',//区
                cityArr: [],//市循环数组
                districtArr: []//区循环数组

            },
            mounted: function () {
                console.log("mount之后");
                this.updateCity(); //初始化城市
            },
            methods: {
                updateCity() { //更新市的数据
                    this.arr.forEach(item => {
                        if (item.name == this.prov) {
                            this.cityArr = item.sub
                        }
                    });
                    this.city=this.cityArr[1].name;//赋初始值
                    this.updateDistrict(); //选择城市后，区联动
                },
                updateDistrict() {//更新区的数据
                    this.cityArr.forEach(item => {
                        if (item.name == this.city) {
                            this.districtArr = item.sub
                        }
                    }); 
                    this.district=this.districtArr[1].name;  //赋初始值
                }
            }
        });
    </script>
</body>

</html>

iChangebaobao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
[Vue]实现城市选择三级联动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabl...
复制链接

扫一扫