php+vue.js 实现省市县乡的四级联动（ajax加载）

最新推荐文章于 2022-06-17 17:18:51 发布

小菜鸟正洋洋

最新推荐文章于 2022-06-17 17:18:51 发布

阅读量1.2k

点赞数

文章标签： vue.js ajax 城市四级联动

本文链接：https://blog.csdn.net/qq_32080545/article/details/72778168

版权

除了引入vue.js还需要引入vue的一个ajax库：vue-resource

html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
</head>
<script src="../vue.js"></script>
<script src="../vue-resource.min.js"></script>
<style>
    select{
        height: 2em;
        width: 12em;
        text-align: center;
    }

</style>
<body>
<div id="address"  style="overflow: scroll;border: 1px solid #000000;height: 15em;text-align: center">
    <p>
        <select name="province" v-on:change="getAddress($event)">
               <option v-for="pro in province" v-bind:value="pro.id" >{{pro.name}}</option>
        </select>

    </p>
    <p>
        <select name="city" v-on:change="getAddress($event)" >
                <option  v-for="ci in city" v-bind:value="ci.id" >{{ci.name}}</option>
        </select>
    </p>
    <p>
        <select name="county"   v-on:change="getAddress($event)" >
            <option  v-for="cou in county" v-bind:value="cou.id" >{{cou.name}}</option>
        </select>
    </p>
    <p>
        <select name="town" >
            <option  v-for="to in town"  v-bind:value="to.id" >{{to.name}}</option>
        </select>
    </p>
</div>
<script>
    //后台传来的初始值
    window.onload = function(){
        address.$http.get('getAddress.php').then(function(response){
            address.province = address.province.concat(response.data);
        });
    };

    var address = new Vue({
        el:"#address",
        data: {
            province: [{"id":0,"name":'———所在省———'}],
            city:[{"id":0,"name":'———所在市———'}],
            county:[{"id":0,"name":'———所在区县———'}],
            town:[{"id":0,"name":'———所在镇乡———'}]
        },
        methods: {
            getAddress: function (enevt) {
                var DOMobj = enevt.currentTarget;
                //获取当前改变项
               var  thisName =  DOMobj.getAttribute("NAME");
                var data= {};
                var id = DOMobj.value;
                switch (thisName){
                    case 'province':
                        this.city = [{"id": 0, "name": '———所在市———'}];
                        this.county = [{"id": 0, "name": '———所在区县———'}];
                        this.town = [{"id": 0, "name": '———所在镇乡———'}];
                        data={'pro_id':id};
                        break;
                    case 'city':
                        this.county = [{"id": 0, "name": '———所在区县———'}];
                        this.town = [{"id": 0, "name": '———所在镇乡———'}];
                        data={'city_id':id};
                        break;
                    case 'county':
                        this.town = [{"id": 0, "name": '———所在乡———'}];
                        data={'county_id':id};
                        break;
                }
                var pro_id = DOMobj.value;
                if (pro_id != 0) {
                    address.$http.get('getAddress.php', data).then(function (response) {
                      if(response.data.length>0){
                          switch (thisName){
                              case 'province':address.city = address.city.concat(response.data);break;
                              case 'city':address.county = address.county.concat(response.data);break;
                              case 'county':address.town = address.town.concat(response.data);break;
                          }
                      }
                    });
                }
            }
        }

    });
</script>
</body>
</html>

getAddress.php

<?php
$dsn = 'mysql:dbname=zyytest;host=127.0.0.1';
$user = 'root';
$pwd ='root';
try{
    $mypdo = new PDO($dsn,$user,$pwd);
}catch (PDOException $e){
    throw new Exception($e->getMessage());
}

if(empty($_GET)){   //省
    $pro = $mypdo->query('select * from t_province');
    $pro = $pro->fetchAll(PDO::FETCH_ASSOC);
    exit(json_encode($pro));

}elseif(isset($_GET['pro_id'])){   //市
    $cirySql = $mypdo->prepare('select * from t_city where province_id = :pro_id ');
    $cirySql->execute(array("pro_id"=>$_GET['pro_id']));
    $city = $cirySql->fetchAll(PDO::FETCH_ASSOC);
    exit(json_encode($city));

}elseif(isset($_GET['city_id'])){      //县
    $cirySql = $mypdo->prepare('select * from t_county where city_id = :pro_id ');
    $cirySql->execute(array("pro_id"=>$_GET['city_id']));
    $city = $cirySql->fetchAll(PDO::FETCH_ASSOC);
    exit(json_encode($city));

}elseif(isset($_GET['county_id'])){   //乡
    $cirySql = $mypdo->prepare('select * from t_town where county_id = :pro_id ');
    $cirySql->execute(array("pro_id"=>$_GET['county_id']));
    $city = $cirySql->fetchAll(PDO::FETCH_ASSOC);
    exit(json_encode($city));

}else{
    exit();
}

小菜鸟正洋洋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
php+vue.js 实现省市县乡的四级联动（ajax加载）

除了引入vue.js还需要引入vue的一个ajax库：vue-resourcehtml: &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="w
复制链接

扫一扫