php+vue.js 實現省市縣鄉的四級聯動（ajax載入）
阿新 • • 發佈：2019-01-10
（注：需要SQL的朋友請在評論區留下email）
除了引入vue.js還需要引入vue的一個ajax庫：vue-resource
html:
- <!DOCTYPE html>
- <html>
- <headlang="en">
- <metacharset="UTF-8">
- <metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <title></title>
- </head>
- <scriptsrc="../vue.js"></script>
- <scriptsrc="../vue-resource.min.js"></script>
- <style>
- select{
- height: 2em;
- width: 12em;
- text-align: center;
- }
- </style>
- <body>
- <divid="address"style="overflow: scroll;border: 1px solid #000000;height: 15em;text-align: center">
- <p>
- <selectname="province"v-on:change="getAddress($event)">
- <optionv-for="pro in province"v-bind:value="pro.id">{{pro.name}}</option>
- </select>
- </p>
- <p>
- <selectname="city"v-on:change="getAddress($event)">
- <optionv-for="ci in city"v-bind:value="ci.id">{{ci.name}}</option>
- </select>
- </p>
- <p>
- <selectname="county"v-on:change="getAddress($event)">
- <optionv-for="cou in county"v-bind:value="cou.id">{{cou.name}}</option>
- </select>
- </p>
- <p>
- <selectname="town">
- <optionv-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();
- }