php用ajax实现三级联动,使用php ajax写省、市、区、三级联动

题目要求：

要求：写一个省市区(或者年月日)的三级联动，实现地区或时间的下拉选择。

实现技术：php ajax

实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。

使用chinastates表查询

无标题文档

三级联动

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

sheng();

shi();

qu();

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

shi();

qu();

});

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

qu();

});

});

function sheng() {

var areacode = "0001";

$.ajax({

async:false,

url: "liandongjiazai.php",

data: {areacode: areacode},

type: "POST",

dataType: "TEXT",

success: function (data) {

var str = "";

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

for (var i = 0; i < hang.length; i++) {

var lie = hang[i].split("^");

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

}

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

}

});

}

function shi() {

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

$.ajax({

async:false,

url:"liandongjiazai.php",

data:{areacode:areacode},

type:"POST",

dataType:"TEXT",

success: function(data){

var str = "";

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

for(var i=0;i

{

var lie = hang[i].split("^");

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

}

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

}

});

}

function qu() {

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

$.ajax({

url:"liandongjiazai.php",

data:{areacode:areacode},

type:"POST",

dataType:"TEXT",

success: function(data){

var str = "";

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

for(var i=0;i

{

var lie = hang[i].split("^");

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

}

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

}

});

}

联动处理页面

$areacode = $_POST["areacode"];

include("LZY.class.php");

$db= new LZY();

$sql = "select * from chinastates WHERE parentareacode='{$areacode}' ";

$arr = $db->Query($sql);

$str = "";

foreach($arr as $v)

{

$str = $str.implode("^",$v)."|";

}

$str = substr($str,0,strlen($str)-1);

echo $str;

当然，我们也可以用 dataType:"json",方法，为了以后便于使用可以将三级联动做成jQuery插件，这样，变方便了使用。

首先，我们先做出主页面的html代码

无标题文档

然后就是我们封装的js插件了

// JavaScript Document

// JavaScript Document

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

//加载三个下拉列表

$("#sanji").html("");

//加载显示数据

//加载省份

FillSheng();

//加载市

FillShi();

//加载区

FillQu();

//当省份选中变化，重新加载市和区

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

//加载市

FillShi();

//加载区

FillQu();

})

//当市选中变化的时候，重新加载区

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

//加载区

FillQu();

})

});

//加载省份信息

function FillSheng()

{

//取父级代号

var pcode = "0001";

//根据父级代号查数据

$.ajax({

async:false,

url:"load.php",

data:{pcode:pcode},

type:"POST",

dataType:"JSON",

success:function(data){

var str = "";

for(var sj in data)

{

str = str+""+data[sj].AreaName+"";

}

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

}

});

}

//加载市信息

function FillShi()

{

//取父级代号

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

//根据父级代号查数据

$.ajax({

async:false,

url:"load.php",

data:{pcode:pcode},

type:"POST",

dataType:"JSON",

success:function(data){

var str = "";

for(var sj in data)

{

str = str+""+data[sj].AreaName+"";

}

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

}

});

}

//加载区信息

function FillQu()

{

//取父级代号

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

//根据父级代号查数据

$.ajax({

url:"load.php",

data:{pcode:pcode},

type:"POST",

dataType:"JSON",

success:function(data){

var str = "";

for(var sj in data)

{

str = str+""+data[sj].AreaName+"";

}

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

}

});

}

最后是

$pcode = $_POST["pcode"];

include("../../LZY.class.php");

$db = new LZY();

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

echo $db->JsonQuery($sql);

如果有需要封装类可以留言

html实现 省——市——区三级联动

html实现  省——市——区三级联动 html中实现三级联动是一个不错的demo,博主在这里跟大家分享一下实现的过程,以及自己在过程中出现的一些问题,仅供参考. 首先我们将全国的省市区数据导入进来, ...

用php和ajax写一个省市区的三级联动，实现地区的下拉选择

要实现这个页面的三级联动,我们需要建立三个php文件,第一个php文件我们导入jQuery文件,里面嵌入JavaScript:第二个php文件我们做一个php的处理页面,里面引入我们封装好的数据库类文 ...

UIPickerView实现省 市 区三级联动

前几天用UIPickerView实现了一下三级联动具体的如下图

第八篇 一个用JS写的省市县三级联动

前些天,做网站用需要用到一个省市县的三级联动,数据要从数据库里面读取,我想了下思路,动手写了下来.    一.思路           js利用Ajax读取控制器里面的函数,利用函数读取存储过程,返回 ...

JAVA EE 中之AJAX 无刷新地区下拉列表三级联动

JSP页面

在JavaScript文件中用ajax方法实现省市区的三级联动

1.JavaScript Document $(document).ready(function(e) { 加载三个下拉列表 $("#sanji").html("< ...

AJAX实现三级联动

省市区三级联动插件: 主页面:为方便使用,不用写过多代码,只写一个id为sanji的div,若别的页面要用,只需写一个id为sanji的div,加载上jQuery与sanji.js文件即可

在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

随机推荐

第三条：用私有构造器或者枚举类型强化Singleton属性

1.使用单元素的枚举类型 public enum Singleton implements Serializable { INSTANCE; private String field; public ...

《看板与Scrum》读书笔记

看板的朴素思想:在制品(work-in-progress, WIP)必须被限制 WIP上限和拉动式生产 1. Scrum与看板简述 Scrum:组织拆分,工作拆分,开发时间拆分,优化发布计划,过程优化 ...

Nginx &plus; spawn-fcgi- Ubuntu中文

Nginx - Ubuntu中文 页面 讨论 查看源代码 历史   导航 首页 最近更改 随机页面 页面分类 帮助 编辑 编辑指南 沙盒 新闻动态 字词处理 工具 链入页面 相关更改 特殊页面 打印版 ...

WebService返回数据前台获取并处理JSON的相关问题

起因: 记录这个问题的起因是一次解答网友的问题,当初自己初次接触webservice时也遇到过,但在写答案时,并没有很深的印象,只是知道webservice在后台返回值的时候,那里是有个坑的.网友问的 ...

Python 日志处理(一) 按Nginx log&lowbar;format 分割日志记录

要求:不使用正则 根据nginx 默认的日志记录格式,分割日志记录. log_format main '$remote_addr - $remote_user [$time_local] " ...

GDAL中MEM格式的简单使用示例

GDAL库中提供了一种内存文件格式--MEM.如何使用MEM文件格式,主要有两种,一种是通过别的文件使用CreateCopy方法来创建一个MEM:另外一种是图像数据都已经存储在内存中了,然后使用内存数 ...

剖析ElasticSearch核心概念，NRT，索引，分片，副本等

ElasticSearch 的核心概念 Near RealTime(NRT) 近实时 近实时有两种意思,一种是从写入数据到可以被搜索到有一个小延迟(大概一秒),还有一种就是基于ElasticSearc ...

python：面向对象编程之Zope&period;interface安装使用

持续学习python+django中... 一.接口简述 在我们所熟知的面向对象编程语言中,大多提供了接口(interface)的概念.接口在编程语言中指的是一个抽象类型,是抽象方法的集合:它的特点如 ...

&dollar;&lowbar;SERVER&lbrack;&&num;39&semi;HTTP&lowbar;REFER&&num;39&semi;&rsqb; 和 session cookie 关系

对Session和Cookie的区分与理解 先说session 对SESSION的争论好象一直没有停止过,不过幺麽能理解SESSION的人应该占90以上.但还是讲讲,别嫌老~ 有一些人赞成用SESSI ...