第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 ?>

实现效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微服务生态

论代码级性能优化变迁之路(一)

大家好,很久没有和大家一起讨论技术了,那么今天我将和大家一起探讨我负责的某项目的性能变迁之路。

8920
来自专栏Linyb极客之路

浅谈高性能数据库集群——读写分离

最近学习了阿里资深技术专家李运华的架构设计关于读写分离的教程,颇有收获,总结一下。

14710
来自专栏idealclover的填坑日常

从零开始折腾博客(2):LMAP搭建Wordpress博客

上面安装的只是MySQL的支持组件,其中的MySQL的系统默认使用的是MariaDB。具体的原因MySQL因为被Oracle收购,有潜在的闭源可能性。为了防止意...

20720
来自专栏文武兼修ing——机器学习与IC设计

AHB学习笔记1.AHB概述2.AHB信号3.AHB传输4.控制信号

1.AHB概述 AHB总线是一种专为高性能同步传输设计的总线,层次高于APB总线,支持以下特性: 突发传输 拆分事务 主设备单时钟周期传输 单时钟沿操作 非三态...

50290
来自专栏web开发

NodeJS使用formidable实现文件上传

  最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加、修改、播放和删除的功能,其中自然要实现音乐和图片的上传功能。于是上网查找资料,找到了一个...

26690
来自专栏北京马哥教育

LINUX上MYSQL优化三板斧

云豆贴心提醒,本文阅读时间7分钟 现在MySQL运行的大部分环境都是在Linux上的,如何在Linux操作系统上根据MySQL进行优化,我们这里给出一些通用简...

32370
来自专栏醉程序

配置nginx + php7 + mongodb的centos服务器环境

22420
来自专栏Java3y

纳税服务系统总结

纳税服务系统总结 纳税服务系统是我第一个做得比较大的项目(不同于javaWeb小项目),该项目系统来源于传智Java32期,十天的视频课程(想要视频的同学关注我...

30890
来自专栏信安之路

渗透测试信息收集工具篇

如果知道目标的域名,你首先要做的就是通过 Whois 数据库查询域名的注册信息,Whois 数据库是提供域名的注册人信息,包括联系方式,管理员名字,管理员邮箱等...

55900
来自专栏马涛涛的专栏

同源策略与CORS跨域

PS:这篇文章是紧接着JSONP原理和Ajax学习与理解写的,有些内容是承接了上两篇文章. 这篇文章只算是我的个人学习笔记,内容没有经过精心排版,也没有认真校对...

21020

扫码关注云+社区

领取腾讯云代金券