第117天:Ajax实现省市区三级联动-阿里云开发者社区

开发者社区> 半指温柔乐> 正文

第117天:Ajax实现省市区三级联动

简介: Ajax实现省市区三级联动 思路: (1)首先获取省份信息 (2)发起Ajax请求,注意dataType中的T大写 (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建option,并将数据添加到option中 (4)定义点击事件,注意点击省调用的是city函数,点击市调用的是area函数 (5)注意获取市信息用的是省编码(pCode),获取区用的是市编码(cCode)。
+关注继续查看

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

实现效果:

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26789 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10081 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13885 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9160 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4659 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4504 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
+关注
半指温柔乐
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
245
文章
205
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载