第117天：Ajax實現省市區三級聯動

時間 2019-11-21

標籤 117天 ajax 實現省市區三級聯動欄目 Ajax 简体版

原文原文鏈接

Ajax實現省市區三級聯動javascript

思路：php

（1）首先獲取省份信息css

（2）發起Ajax請求，注意dataType中的T大寫html

（3）封裝回調函數，回調函數success中用$.each循環每一條數據，動態建立option，並將數據添加到option中java

（4）定義點擊事件，注意點擊省調用的是city函數，點擊市調用的是area函數mysql

（5）注意獲取市信息用的是省編碼（pCode），獲取區用的是市編碼（cCode）。jquery

一、HTML代碼ajax

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>省市區三級聯動</title>
  6     <style type="text/css">
  7     #showInfo{
  8         position: absolute;
  9         width: 600px;
 10         height: 500px;
 11         overflow-y: scroll;
 12         overflow-x: hidden;
 13         background: lightgreen;
 14         left: 50%;
 15         margin-left: -300px;
 16     }
 17     #showInfo div{
 18         float:left;
 19         margin-left: 30px;
 20         margin-top: 30px;
 21         width: 160px;
 22     }
 23     #showInfo div select{
 24         width: 160px;
 25     }
 26     </style>
 27     <script type="text/javascript" src="./jquery-1.11.2.js"></script>
 28     <script type="text/javascript">
 29     $(function() {
 30         //獲取列表數據的通用方法
 31         function getList(code,flag,callback){
 32             $.ajax({
 33  url:'./data.php',
 34  type:'get',
 35  dataType:"jsonp",
 36  data:{citycode:code,flag:flag},
 37  success:callback  38             });
 39         }
 40         //獲取地區信息的回調函數
 41         var area = function(data){
 42             $.each(data,function(i,element){
 43                 var op = $("<option></option>").attr("value",element.code).append(element.name);
 44                 $("#area").append(op);
 45             });
 46         }
 47         //獲取市信息的回調函數
 48         var city = function(data){
 49             $.each(data,function(i,element){
 50                 var op = $("<option></option>").attr("value",element.code).append(element.name);
 51                 $("#city").append(op);
 52             });
 53             //判斷是否爲直轄市
 54             if(data.length == 1){
 55                 var citycode = $("#city").children("option").eq(0).attr("value");
 56  getList(citycode,3,area);
 57             }
 58 
 59         }
 60         //得到省份信息的回調函數
 61         var province = function(data){
 62             $.each(data,function(i,element){
 63                 var op = $("<option></option>").attr("value",element.code).append(element.name);
 64                 $("#province").append(op);
 65             });
 66             //默認北京市
 67  getList('110000',2,city);
 68  getList('110100',3,area);
 69         }
 70         
 71         //發送請求獲取省份信息
 72  getList(0,1,province);
 73 
 74         //給省份信息設置選擇事件
 75         $("#province").change(function() {
 76             $("#city").children("option").remove();
 77             $("#area").children("option").remove();
 78             var pcode = $(this).val();
 79  getList(pcode,2,city);
 80         });
 81         
 82         //給市信息設置選擇事件
 83         $("#city").change(function() {
 84             $("#area").children("option").remove();
 85             var citycode = $(this).val();
 86  getList(citycode,3,area);
 87         });
 88 
 89     });
 90     </script>
 91 </head>
 92 <body>
 93     <div id="showInfo">
 94         <div>
 95             <select id="province">
 96             </select>
 97         </div>
 98         <div>
 99             <select id="city">
100             </select>
101         </div>
102         <div>
103             <select id="area">
104             </select>
105         </div>
106     </div>
107 </body>
108 </html>

HTML優化版代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>省市區三級聯動</title>
 6     <style type="text/css">
 7         #showInfo{
 8             position: absolute;
 9             width: 600px;
10             height: 500px;
11             overflow-y: scroll;
12             overflow-x: hidden;
13             background: lightgreen;
14             left: 50%;
15             margin-left: -300px;
16         }
17         #showInfo div{
18             float:left;
19             margin-left: 30px;
20             margin-top: 30px;
21             width: 160px;
22         }
23         #showInfo div select{
24             width: 160px;
25         }
26     </style>
27     <script type="text/javascript" src="./jquery-1.11.2.js"></script>
28     <script type="text/javascript">
29         $(function(){
30             function callback(id,code,flag){
31                 $.ajax({
32  url:"./data.php",
33  type:"get",
34  dataType:"jsonp",
35  data:{citycode:code,flag:flag},
36  success:function(data){
37                          $.each(data,function(i,element){//i表示索引,element表示每一項
38                              var op= $("<option></option>").attr("value",element.code).append(element.name);//建立option,設置value屬性,將name添加到option中
39                             $("#"+id).append(op);//將op添加到province中
40                         });
41 
42                     }
43                 });
44             }
45 
46             var area=function(cCode){
47                 callback('area',cCode,3);
48             };
49 
50             var city=function(pCode){
51                 callback('city',pCode,2);
52             };
53             //獲取省份信息
54             var province=function(pCode){
55                 callback('province',pCode,1);
56             };
57 
58             //調用獲取的省份信息
59             province(0);
60             city('110000');
61             area('110100');
62 
63             //給省份註冊選中事件
64             $('#province').change(function(){
65                 $("#city").children("option").remove();//點擊省，清空市
66                 var pCode=$(this).val();
67  city(pCode);
68             });
69             //給市註冊事件
70             $('#city').change(function(){
71                 $("#area").children("option").remove();//點擊市，清空區
72                 var cCode=$(this).val();
73  area(cCode);
74             });
75 
76         });
77 
78 
79     </script>
80 </head>
81 <body>
82 <div id="showInfo">
83     <div>
84         <select id="province">
85         </select>
86     </div>
87     <div>
88         <select id="city">
89         </select>
90     </div>
91     <div>
92         <select id="area">
93         </select>
94     </div>
95 </div>
96 </body>
97 </html>

二、data.php代碼

 1 <?php
 2 require_once('connect.php');
 3 
 4 $code = $_GET['citycode'];//獲取省市區的編碼
 5 $callback = $_GET['callback'];
 6 $flag = $_GET['flag'];//標誌位，用來區分是省市區哪一個
 7 //查詢省市區對應的列表數據
 8 if($flag == 1){
 9     $query=mysql_query("select * from province order by id");
10 }else if($flag == 2){
11     $query=mysql_query("select * from city where provincecode = '".$code."' order by id" );
12 }else if($flag == 3){
13     $query=mysql_query("select * from area where citycode = '".$code."' order by id" );
14 }
15 $sayList = [];
16 while ($row=mysql_fetch_array($query)) {
17     $sayList[] = array(
18         'code'=>$row['code'],
19         'name'=>$row['name']
20     );
21 }
22 if($sayList){
23     echo $callback.'('.json_encode($sayList).')';
24 
25 }else{
26     echo $callback.'('.'[]'.')';
27 }
28 
29 ?>

三、鏈接數據庫 connect.php

 1 <?php
 2 $host="localhost";
 3 $db_user="root";
 4 $db_pass="123456";
 5 $db_name="mydb";
 6 $timezone="Asia/Shanghai";
 7 
 8 $link=mysql_connect($host,$db_user,$db_pass);
 9 mysql_select_db($db_name,$link);
10 mysql_query("SET names UTF8");
11 
12 header("Content-Type: text/html; charset=utf-8");
13 date_default_timezone_set($timezone); //北京時間
14 ?>

實現效果：sql

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。