（注：需要SQL的朋友请在评论区留下email）

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

html:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
  6.     <title></title>  
  7. </head>  
  8. <script src="../vue.js"></script>  
  9. <script src="../vue-resource.min.js"></script>  
  10. <style>  
  11.     select{  
  12.         height: 2em;  
  13.         width: 12em;  
  14.         text-align: center;  
  15.     }  
  16.   
  17. </style>  
  18. <body>  
  19. <div id="address"  style="overflow: scroll;border: 1px solid #000000;height: 15em;text-align: center">  
  20.     <p>  
  21.         <select name="province" v-on:change="getAddress($event)">  
  22.                <option v-for="pro in province" v-bind:value="pro.id" >{{pro.name}}</option>  
  23.         </select>  
  24.   
  25.     </p>  
  26.     <p>  
  27.         <select name="city" v-on:change="getAddress($event)" >  
  28.                 <option  v-for="ci in city" v-bind:value="ci.id" >{{ci.name}}</option>  
  29.         </select>  
  30.     </p>  
  31.     <p>  
  32.         <select name="county"   v-on:change="getAddress($event)" >  
  33.             <option  v-for="cou in county" v-bind:value="cou.id" >{{cou.name}}</option>  
  34.         </select>  
  35.     </p>  
  36.     <p>  
  37.         <select name="town" >  
  38.             <option  v-for="to in town"  v-bind:value="to.id" >{{to.name}}</option>  
  39.         </select>  
  40.     </p>  
  41. </div>  
  42. <script>  
  43.     //后台传来的初始值  
  44.     window.onload = function(){  
  45.         address.$http.get('getAddress.php').then(function(response){  
  46.             address.province = address.province.concat(response.data);  
  47.         });  
  48.     };  
  49.   
  50.     var address = new Vue({  
  51.         el:"#address",  
  52.         data: {  
  53.             province: [{"id":0,"name":'———所在省———'}],  
  54.             city:[{"id":0,"name":'———所在市———'}],  
  55.             county:[{"id":0,"name":'———所在区县———'}],  
  56.             town:[{"id":0,"name":'———所在镇乡———'}]  
  57.         },  
  58.         methods: {  
  59.             getAddress: function (enevt) {  
  60.                 var DOMobj = enevt.currentTarget;  
  61.                 //获取当前改变项  
  62.                var  thisName =  DOMobj.getAttribute("NAME");  
  63.                 var data= {};  
  64.                 var id = DOMobj.value;  
  65.                 switch (thisName){  
  66.                     case 'province':  
  67.                         this.city = [{"id": 0, "name": '———所在市———'}];  
  68.                         this.county = [{"id": 0, "name": '———所在区县———'}];  
  69.                         this.town = [{"id": 0, "name": '———所在镇乡———'}];  
  70.                         data={'pro_id':id};  
  71.                         break;  
  72.                     case 'city':  
  73.                         this.county = [{"id": 0, "name": '———所在区县———'}];  
  74.                         this.town = [{"id": 0, "name": '———所在镇乡———'}];  
  75.                         data={'city_id':id};  
  76.                         break;  
  77.                     case 'county':  
  78.                         this.town = [{"id": 0, "name": '———所在乡———'}];  
  79.                         data={'county_id':id};  
  80.                         break;  
  81.                 }  
  82.                 var pro_id = DOMobj.value;  
  83.                 if (pro_id != 0) {  
  84.                     address.$http.get('getAddress.php', data).then(function (response) {  
  85.                       if(response.data.length>0){  
  86.                           switch (thisName){  
  87.                               case 'province':address.city = address.city.concat(response.data);break;  
  88.                               case 'city':address.county = address.county.concat(response.data);break;  
  89.                               case 'county':address.town = address.town.concat(response.data);break;  
  90.                           }  
  91.                       }  
  92.                     });  
  93.                 }  
  94.             }  
  95.         }  
  96.   
  97.     });  
  98. </script>  
  99. </body>  
  100. </html>  

getAddress.PHP

  1. <?php  
  2. $dsn = 'mysql:dbname=zyytest;host=127.0.0.1';  
  3. $user = 'root';  
  4. $pwd ='root';  
  5. try{  
  6.     $mypdo = new PDO($dsn,$user,$pwd);  
  7. }catch (PDOException $e){  
  8.     throw new Exception($e->getMessage());  
  9. }  
  10.   
  11. if(empty($_GET)){   //省  
  12.     $pro = $mypdo->query('select * from t_province');  
  13.     $pro = $pro->fetchAll(PDO::FETCH_ASSOC);  
  14.     exit(json_encode($pro));  
  15.   
  16. }elseif(isset($_GET['pro_id'])){   //市  
  17.     $cirySql = $mypdo->prepare('select * from t_city where province_id = :pro_id ');  
  18.     $cirySql->execute(array("pro_id"=>$_GET['pro_id']));  
  19.     $city = $cirySql->fetchAll(PDO::FETCH_ASSOC);  
  20.     exit(json_encode($city));  
  21.   
  22. }elseif(isset($_GET['city_id'])){      //县  
  23.     $cirySql = $mypdo->prepare('select * from t_county where city_id = :pro_id ');  
  24.     $cirySql->execute(array("pro_id"=>$_GET['city_id']));  
  25.     $city = $cirySql->fetchAll(PDO::FETCH_ASSOC);  
  26.     exit(json_encode($city));  
  27.   
  28. }elseif(isset($_GET['county_id'])){   //乡  
  29.     $cirySql = $mypdo->prepare('select * from t_town where county_id = :pro_id ');  
  30.     $cirySql->execute(array("pro_id"=>$_GET['county_id']));  
  31.     $city = $cirySql->fetchAll(PDO::FETCH_ASSOC);  
  32.     exit(json_encode($city));  
  33.   
  34. }else{  
  35.     exit();  
  36. } 
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue