vue 选城市三级联动

Posted zhishaofei3

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 选城市三级联动相关的知识,希望对你有一定的参考价值。

<div id="example">
    <select v-model="prov">
        <option v-for="option in arr" :value="option.name">
            {{ option.name }}
        </option>
    </select>
    <select v-model="city">
        <option v-for="option in cityArr" :value="option.name">
            {{ option.name }}
        </option>
    </select>
    <select v-model="district" v-if="district">
        <option v-for="option in districtArr" :value="option.name">
            {{ option.name }}
        </option>
    </select>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: #example,
        data: {
            arr: arrAll,
            prov: 北京,
            city: 北京,
            district: 东城区,
            cityArr: [],
            districtArr: []
        },
        methods: {
            updateCity: function () {
                for (var i in this.arr) {
                    var obj = this.arr[i];
                    if (obj.name == this.prov) {
                        this.cityArr = obj.sub;
                        break;
                    }
                }
                this.city = this.cityArr[1].name;
            },
            updateDistrict: function () {
                for (var i in this.cityArr) {
                    var obj = this.cityArr[i];
                    if (obj.name == this.city) {
                        this.districtArr = obj.sub;
                        break;
                    }
                }
                if(this.districtArr && this.districtArr.length > 1 && this.districtArr[1].name) {
                    this.district = this.districtArr[1].name;
                } else {
                    this.district = ‘‘;
                }
            }
        },
        beforeMount: function () {
            this.updateCity();
            this.updateDistrict();
        },
        watch: {
            prov: function () {
                this.updateCity();
                this.updateDistrict();
            },
            city: function () {
                this.updateDistrict();
            }
        }
    })
</script>

 

城市json数据量比较大,完整案例请看:

以上是关于vue 选城市三级联动的主要内容,如果未能解决你的问题,请参考以下文章

uni-app中的城市三级联动

jquery 城市三级联动

vue3.0手写省市区地区联动 详细

AjaxPHPmysql实现城市的三级联动

城市三级联动 AJAX-原生js封装

task 1:完成省城市的三级联动(包括湖南省),附代码和效果图。