下面我们用Jquery,ajax,做一个省,市,县的三级联动:

下面是我做三级联动下拉的步骤以及逻辑

第一步:先做一个省市区表格

第二步:建个PHP页面显示用我是在

里放

用来接收要显示的省市区表格信息,里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法

第三步:写封装方法用JS

第四步:做个纯php处理页面,这个页面处理传过来的任何代号

首先我们要建立数据库:

这就是包含省,市,县的数据库。

下面我们就写主页面:sanji.php:

Document

然后就是js文件:

// JavaScript Document

$(document).ready(function(e){

//向div里面仍三个下拉

var str = "";

$("#sanjiliandong").html(str);//三个下拉显示

//当省选中的话市也会跟着变去也会变。市和区都会加载一遍

FillSheng();//省

FillShi();//市

FillQu();//区

//给省加点击事件

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

FillShi();//市

FillQu();//区

})

//给市加点击事件

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

FillQu();//区

})

});

//做三个方法分别为省市区

//填充省的方法,如何在表里查询 出省的代号例如:北京0001、天津0001,中国下面所有省都是0001开头的

function FillSheng()

{

var pcode = "0001";

$.ajax({

async:false,

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

//返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组

var hang = data.split("|");

var str = "请选择地区";

//把行的数组遍历下用for循环...length长度

for(var i=0;i

{

//把行的索引i在拆下.列与列的分隔符再拆

var lie = hang[i].split("^");//这是列的数组

str += ""+lie[1]+"";

$("#sheng").html(str);

}

}

});

}

//填充市的方法

function FillShi()

{

var pcode = $("#sheng").val();

$.ajax({

async:false,//****

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

//返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组

var hang = data.split("|");

var str = "请选择城市";

//把行的数组遍历下用for循环...length长度

for(var i=0;i

{

//把行的索引i在拆下.列与列的分隔符再拆

var lie = hang[i].split("^");//这是列的数组

str += ""+lie[1]+"";

}

$("#shi").html(str);

}

});

}

//填充区的方法

function FillQu()

{

var pcode = $("#shi").val();

$.ajax({

async:false,

url:"chuli.php",

data:{pcode:pcode},

type:"POST",

dataType:"TEXT",

success: function(data){

//返回数据,根据行于行之间的分隔符来拆,拆完之后会返回一数组/行的数组

var hang = data.split("|");

var str = "请选择乡县";

//把行的数组遍历下用for循环...length长度

for(var i=0;i

{

//把行的索引i在拆下.列与列的分隔符再拆

var lie = hang[i].split("^");//这是列的数组

str += ""+lie[1]+"";

$("#qu").html(str);

}

}

});

}

之后是查询数据库的处理文件:

//处理页面只有一个功能处理传过来的所有代号(省、市、区。。。)

include("DBDA.class.php");

$db = new DBDA();

$pcode = $_POST["pcode"];//取到赋值代号

$sql = "select * from chinastates where parentareacode='{$pcode}'";

echo $db->StrQuery($sql);

显示效果如下:

这就是我们要做的省,市,县的三级联动。在这里我们重点强调一下一定要做好逻辑关系,想好了在去动手写代码,要不然容易混乱,这样的话就只能从头开始。

百度云 ajax jquery 三级联动,jQuery ajax实现省市县三级联动相关推荐

  1. html5手机端三级联动城市选择代码,省市县三级联动(jQuery手机端收货地址选择地区代码)...

    [实例简介] [实例截图] [核心代码] jQuery手机端收货地址选择代码 - 站长素材 默认调用 所在地区: 设置默认值 所在地区: /** * 默认调用 */ !function () { va ...

  2. 前端、后端,数据结构,编程语言,微信小程序,英语,理综,PS,MySql,Python,JS,Jquery,Ajax,免费百度云资源链接

    高中英语知识点汇总百度云: 链接:HTTPS://pan.baidu.com/s/1X0ELSe7LorfLAzNMrUpkxA密码:byo5 英语基础语法百度云: 链接:HTTPS://pan.ba ...

  3. jquery ajax java二级联动_使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例...

    首先我们需要先建立好数据库,将一些数据插入进去 需要两张表: province:省份表 city: 城市表 如图: 然后再在java中建立相关的实体类与之对应 再然后,我们就能开始做jdbc的操作了 ...

  4. jquery省市县三级联动

    Jquery省市县三级联动,数据来源js,无需调用接口 可前往本人发布资源<Jquery省市县三级>免积分下载 目录 效果 html部分 <!DOCTYPE html> < ...

  5. jq ajax 读取本地文件,jquery读取本地文件

    $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquer ...

  6. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  7. 【Ajax Servlet JSP MySQL】Ajax实现省份地区选择:三级联动

    三级联动效果展示 环境 Eclipse for Java EE MySQL数据库 相关使用语言 Java(Java,Servlet后台处理) Web(HTML,CSS,JS,JSON,GSON.JS与 ...

  8. jQuery里如何使用ajax发送请求

    回到文章总目录 本篇文章介绍的是在jQuery里如何使用ajax发送请求 jquery里面的单纯的get请求和单纯的post请求比较简洁的,也比较简易 jquery里面ajax通用方法(自定义个化强) ...

  9. 完整,详细的基于jquery省市三级联动和基于angular的省市三级联动对比

    前几天遇到需要输入地址的一个项目,里面就会有全国各个省市县的选择. 对于全国省市县的选择,难点在于全国省市县的数据资源.而具体的操作并不是很难. 本来我想免费发送资源的,可是csdn,这最少也需要1积 ...

最新文章

  1. Facebook恐打破最长月度连跌记录,黄金时代宣告结束!
  2. 微积分笔记(一)--预备知识
  3. pid控制从入门到精通pdf_网络工程师从入门到精通通俗易懂系列 | 访问控制列表ACL原来还可以这样理解,果断收藏!...
  4. 消防信号总线原理_建筑电气消防设计6大常见问题分析
  5. [Json] C#ConvertJson|List转成Json|对象|集合|DataSet|DataTable|DataReader转成Json (转载)...
  6. arthas用的好好的,写个lambda表达式就跪了?该咋解决?
  7. Spark记录-Scala记录(基础程序例子)
  8. 学习simple.data之基础篇
  9. Oracle技术之和外键相关的阻塞和死锁问题总结(一)
  10. 矩阵论7,8,9作业
  11. 文件加密新招--WinRAR文件加密(上)
  12. 第二章-信源与信息熵(一)
  13. 【U+】通用财务修改财务参数:业务生成的会计凭证不允许修改
  14. mysql relaylog清理_mysql 清除relay-log文件方法详解
  15. 《智慧工地单点解析系列(四)—— 安全管理》
  16. Nginx实现域名跳转
  17. 后端开发java与php,【后端开发】java与php的区别是什么
  18. PX90---Lags Backs
  19. ubuntu14.04LTS安装steam
  20. 大学生笔记本选购指南(2018)

热门文章

  1. Python下opencv使用笔记系列
  2. 深度学习与计算机视觉系列(1)_基础介绍
  3. 彩色图像分割方法的汇总
  4. mysql dba系统学习(20)mysql存储引擎MyISAM
  5. MVC框架浅析(基于PHP)
  6. Visio与word搭配使用
  7. YARN/MRv2 Resource Manager深入剖析—RM总体架构
  8. Ubuntu下git使用教程
  9. 利用github-pages建立个人博客
  10. javascript系列-class10.DOM(下)