Ajax实现省市区三级联动

思路：

（1）首先获取省份信息

（2）发起Ajax请求，注意dataType中的T大写

（3）封装回调函数，回调函数success中用$.each循环每一条数据，动态创建option，并将数据添加到option中

（4）定义点击事件，注意点击省调用的是city函数，点击市调用的是area函数

（5）注意获取市信息用的是省编码（pCode），获取区用的是市编码（cCode）。

1、HTML代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>省市区三级联动</title>

     <style type="text/css">

     #showInfo{

         position: absolute;

         width: 600px;

         height: 500px;

         overflow-y: scroll;

         overflow-x: hidden;

         background: lightgreen;

         left: 50%;

         margin-left: -300px;

     }

     #showInfo div{

         float:left;

         margin-left: 30px;

         margin-top: 30px;

         width: 160px;

     }

     #showInfo div select{

         width: 160px;

     }

     </style>

     <script type="text/javascript" src="./jquery-1.11.2.js"></script>

     <script type="text/javascript">

     $(function() {

         //获取列表数据的通用方法

         function getList(code,flag,callback){

             $.ajax({

                 url:'./data.php',

                 type:'get',

                 dataType:"jsonp",

                 data:{citycode:code,flag:flag},

                 success:callback

             });

         }

         //获取地区信息的回调函数

         var area = function(data){

             $.each(data,function(i,element){

                 var op = $("<option></option>").attr("value",element.code).append(element.name);

                 $("#area").append(op);

             });

         }

         //获取市信息的回调函数

         var city = function(data){

             $.each(data,function(i,element){

                 var op = $("<option></option>").attr("value",element.code).append(element.name);

                 $("#city").append(op);

             });

             //判断是否为直辖市

             if(data.length == 1){

                 var citycode = $("#city").children("option").eq(0).attr("value");

                 getList(citycode,3,area);

             }

         }

         //获得省份信息的回调函数

         var province = function(data){

             $.each(data,function(i,element){

                 var op = $("<option></option>").attr("value",element.code).append(element.name);

                 $("#province").append(op);

             });

             //默认北京市

             getList('110000',2,city);

             getList('110100',3,area);

         }

         //发送请求获取省份信息

         getList(0,1,province);

         //给省份信息设置选择事件

         $("#province").change(function() {

             $("#city").children("option").remove();

             $("#area").children("option").remove();

             var pcode = $(this).val();

             getList(pcode,2,city);

         });

         //给市信息设置选择事件

         $("#city").change(function() {

             $("#area").children("option").remove();

             var citycode = $(this).val();

             getList(citycode,3,area);

         });

     });

     </script>

 </head>

 <body>

     <div id="showInfo">

         <div>

             <select id="province">

             </select>

         </div>

         <div>

             <select id="city">

             </select>

         </div>

         <div>

             <select id="area">

             </select>

         </div>

     </div>

 </body>

 </html>

HTML优化版代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>省市区三级联动</title>

     <style type="text/css">

         #showInfo{

             position: absolute;

             width: 600px;

             height: 500px;

             overflow-y: scroll;

             overflow-x: hidden;

             background: lightgreen;

             left: 50%;

             margin-left: -300px;

         }

         #showInfo div{

             float:left;

             margin-left: 30px;

             margin-top: 30px;

             width: 160px;

         }

         #showInfo div select{

             width: 160px;

         }

     </style>

     <script type="text/javascript" src="./jquery-1.11.2.js"></script>

     <script type="text/javascript">

         $(function(){

             function callback(id,code,flag){

                 $.ajax({

                     url:"./data.php",

                     type:"get",

                     dataType:"jsonp",

                     data:{citycode:code,flag:flag},

                     success:function(data){

                          $.each(data,function(i,element){//i表示索引,element表示每一项

                              var op= $("<option></option>").attr("value",element.code).append(element.name);//创建option,设置value属性,将name添加到option中

                             $("#"+id).append(op);//将op添加到province中

                         });

                     }

                 });

             }

             var area=function(cCode){

                 callback('area',cCode,3);

             };

             var city=function(pCode){

                 callback('city',pCode,2);

             };

             //获取省份信息

             var province=function(pCode){

                 callback('province',pCode,1);

             };

             //调用获取的省份信息

             province(0);

             city('110000');

             area('110100');

             //给省份注册选中事件

             $('#province').change(function(){

                 $("#city").children("option").remove();//点击省，清空市

                 var pCode=$(this).val();

                 city(pCode);

             });

             //给市注册事件

             $('#city').change(function(){

                 $("#area").children("option").remove();//点击市，清空区

                 var cCode=$(this).val();

                 area(cCode);

             });

         });

     </script>

 </head>

 <body>

 <div id="showInfo">

     <div>

         <select id="province">

         </select>

     </div>

     <div>

         <select id="city">

         </select>

     </div>

     <div>

         <select id="area">

         </select>

     </div>

 </div>

 </body>

 </html>

2、data.php代码

 <?php

 require_once('connect.php');

 $code = $_GET['citycode'];//获取省市区的编码

 $callback = $_GET['callback'];

 $flag = $_GET['flag'];//标志位，用来区分是省市区哪个

 //查询省市区对应的列表数据

 if($flag == 1){

     $query=mysql_query("select * from province order by id");

 }else if($flag == 2){

     $query=mysql_query("select * from city where provincecode = '".$code."' order by id" );

 }else if($flag == 3){

     $query=mysql_query("select * from area where citycode = '".$code."' order by id" );

 }

 $sayList = [];

 while ($row=mysql_fetch_array($query)) {

     $sayList[] = array(

         'code'=>$row['code'],

         'name'=>$row['name']

     );

 }

 if($sayList){

     echo $callback.'('.json_encode($sayList).')';

 }else{

     echo $callback.'('.'[]'.')';

 }

 ?>

3、连接数据库 connect.php

 <?php

 $host="localhost";

 $db_user="root";

 $db_pass="123456";

 $db_name="mydb";

 $timezone="Asia/Shanghai";

 $link=mysql_connect($host,$db_user,$db_pass);

 mysql_select_db($db_name,$link);

 mysql_query("SET names UTF8");

 header("Content-Type: text/html; charset=utf-8");

 date_default_timezone_set($timezone); //北京时间

 ?>

实现效果：

第117天：Ajax实现省市区三级联动的更多相关文章

  1. 基于ThinkPHP+AJAX的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  2. 基于thinkphp和ajax的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  3. （jquery+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14

    首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...

  4. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  5. Ajax来实现下拉框省市区三级联动效果（服务端基于express）

    //服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...

  6. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  7. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  8. 省市区三级联动（二）JS部分简单版

    通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...

  9. 【JavaScript&jQuery】省市区三级联动

    HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...

随机推荐

  1. 20155214 2016-2017-2 《Java程序设计》第4周学习总结

    20155214 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 Chapter6 父类就是将多个类的相同代码提升(Pull Up) 子类继承父类会继承到pr ...

  2. 20155327 实验一《Java开发环境的熟悉》实验报告

    实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验知识点 JVM.JRE.JDK的安装位置与区别: 命令行运行javac:jav ...

  3. 再装虚拟机及git

    再装虚拟机及git 问题1:在假期的学习中并没有上传代码的习惯,到了开学要用到的时候发现新建的目录无法git到码云上,当时也没有在意,直到老师问我要代码链接才意识到这个问题. 问题2:在按照老师的博客 ...

  4. vim 多个文件切换

    打开多个文件:1.vim还没有启动的时候:在终端里输入 vim file1 file2 ... filen便可以打开所有想要打开的文件2.vim已经启动输入:open file可以再打开一个文件,并且 ...

  5. resultMap中的collection集合出现只能读取一条数据的解决方法

    查询数据时只能获得collection集合中的的一条数据,相关情况如下: 结果集resultMap: <resultMap id="ManagerRolesAcls" typ ...

  6. [Cocos2d-html5]关于压缩

    使用的是2.2版本,压缩时要注意文件顺序,main.js文件最好排在最后一个,避免错误.

  7. new与alloc/init的区别

    alloc:分配内存. init:初始化. new:代替上面两个函数:分配内存,并且初始化. 注意: 1.在实际开发中很少会用到new,一般创建对象时我们一般是 [[className alloc]i ...

  8. 支付宝、微信、QQ 收款二维码三合一

    最近折腾了一下合并收款码,简单记录一下折腾的过程,方法不唯一,只是提供一种思路,如果各位大佬有更加简单粗暴的办法,那就更好了. 原理 首先解析出三个二维码的内容,用 Nginx 判断 User age ...

  9. Linux学习(一)------CentOs安装mysql5.5 数据库

    具体方法和步骤如下所示: 1.第一步就是看linu是否安装了mysql,经过rpm -qa|grep mysql查看到centos下安装了mysql5.1,那就开始卸载咯 2.接下来就是卸载mysql ...

  10. php开发文章发布示例(正则表达式实例开发)

    存档: post.php <form method="post" action="viewthread.php" target="_blank& ...