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. 20155308 加分项——C语言实现Linux的pwd命令

    20155308 加分项--C语言实现Linux的pwd命令 实现要求 学习pwd命令 什么是pwd pwd' 代表的是'Print Working Directory'(打印当前目录).如它的名字那 ...

  2. [agc006F]Blackout

    Description 传送门 Solution 这道题的操作是真的得服气..感谢各位大佬的指导. 首先我们看看答案的最大值:1010.哦不,这不可能存在,我们肯定不可能一轮轮枚举点进行扩展的. 所以 ...

  3. .net core 使用windows版redis

    在项目中为了减少程序占用内存(将结果保存在全局变量里面,会占用内存),要求使用redis.开始了爬坑的过程.o(╥﹏╥)o c#操作redis 基本就这3中情况: ServiceStack.Redis ...

  4. 一个非常好用的PHP数组函数

    array_column 该函数非常有用,在PHP 5.5中可直接调用. 有如下二维数组,如要抽取每个子数组中的特定项. <?php // Array representing a possib ...

  5. java阻塞队列之LinkedBlockingQueue

    LinkedBlockingQueue是BlockingQueue中的其中一个,其实现方式为单向链表,下面看其具体实现.(均为JDK8) 一.构造函数 在LinkedBlockingQueue中有三个 ...

  6. JMeter自学笔记1-环境安装

    一.写在前面的话: Jmeter是一款优秀的开源测试工具, 是每位测试工程师进阶过程中,需要熟悉并掌握的一款测试工具,熟练使用Jmeter能大大提高工作效率. Jmeter环境安装需要依赖JDK,所以 ...

  7. Windows10 Oracle ODBC安装配置

    项目紧迫,需在短时间内交付成果,新团队成员,吐嘈之前数据库设计太low,很难看懂数据库表结构间的关系,为了使新同事更好的了解数据库表结构,特意使用powerDesigner对oracle.mysql数 ...

  8. “错误: 编码GBK的不可映射字符” 的解决方案

    命令行下,用javac命令编译java程序时,如果文档的编码为“utf-8”,并且含有中文字符时,会出现乱码现象,编译通过不了.如图: 解决方案:编译时指定编码方式,防止乱码.如下:

  9. Windows单机配置Kafka环境

    首先确保机器已经安装好Zookeeper,Zookeeper安装参考 Windows单机配置Zookeeper环境 然后确保Zookeeper是正常启动状态 下载Kafka http://kafka. ...

  10. 华为笔试——C++括号匹配

    题目:括号匹配 题目来源:https://blog.csdn.net/lizi_stdio/article/details/76618908 题目介绍:输入一个字符串,里面可能包含“()”.“ [   ...