提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

开源三级联动，Vue.js编写省份、城市、区、县三级联动源码

开源
2023-03-14 22:51:52 时间

开源三级联动，Vue.js编写省份、城市、区、县三级联动源码

1.三级联动框样式

上图：image.png

请访问：这里！！ 查看三级联动器效果。

2.如何在html里面引用

文件的目录路径为：

image.png

data.js是存放我们中国省、市、区县信息的json格式文件。

需要的可以点击下载：https://download.csdn.net/download/qq_43592352/12374723

3.html代码

<html>
<head>
    <script src="vue.js" type="text/javascript"></script>
    <script src="data.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="hcq.css"/>
    <style>
    body{
        background: url('bg6.png') no-repeat;
        background-size: cover;
        height:100%;
        
    }
    #app{
        width: 700px;
        margin: 300px 0 0 400px;
        text-align: center;
    }
    #app select{
        width: 200px;
        height: 30px;
    }
    </style>
</head>
<body >
   <div id="app">
       <select class="hcqbtn hcqbtn-danger" v-model='myprovice' @click="handleChangeCity()">
            <option v-for='p in Allprovice' >{{p.name}}</option>
       </select>
       <select class="hcqbtn hcqbtn-warning" v-model='mycity' @click="handleChangeArea()">
            <option v-for='c in Allcity.city'>{{c.name}}</option>
       </select>
       <select class="hcqbtn hcqbtn-primary">
            <option v-for='a in Allarea'>{{a}}</option>
       </select>
    </div>
</body>
<script>

    var app=new Vue({
        el:'#app',
        data:{
            Allprovice:provice,
            Allcity:[],
            Allarea:[],
            myprovice:'',
            mycity:''
        },
        methods: {
            handleChangeCity:function(){
                var index;
                for(var i=0;i<this.Allprovice.length;i++)
                {
                    if(this.myprovice==this.Allprovice[i].name) index=i;
                }
                this.Allcity=this.Allprovice[index];
                console.log(this.Allcity);
            },
            handleChangeArea:function(){
                var index;
                for(var i=0;i<this.Allcity.city.length;i++)
                {
                    if(this.mycity==this.Allcity.city[i].name) index=i;
                }
                this.Allarea=this.Allcity.city[index].districtAndCounty;
                console.log(this.Allarea);
            }
        },
    })
</script>
</html>

相关文章