第117天：Ajax实现省市区三级联动
Ajax实现省市区三级联动
思路：
（1）首先获取省份信息
（2）发起Ajax请求，注意dataType中的T大写
（3）封装回调函数，回调函数success中用$.each循环每一条数据，动态创建option，并将数据添加到option中
（4）定义点击事件，注意点击省调用的是city函数，点击市调用的是area函数
（5）注意获取市信息用的是省编码（pCode），获取区用的是市编码（cCode）。
1、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 //获取列表数据的通用方法
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>2、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 ?>3、连接数据库 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 ?>实现效果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-12-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建，轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量，更专注于业务发展，让企业一站式享受数据上云及分布式架构的技术红利！
腾讯云开发者
