题目要求：

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

实现技术：php ajax

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

使用chinastates表查询

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<h1>三级联动</h1>

<select id="sheng"></select>

<select id="shi"></select>

<select id="qu"></select>

</body>

<script type="text/javascript">

    $(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 + "<option value='"+lie[0]+"'>" + lie[1] + "</option>";

                    }

                    $("#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<hang.length;i++)

                    {

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

                        str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                    }

                    $("#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<hang.length;i++)

                    {

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

                        str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";

                    }

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

                }

            });

        }

</script>

</html>

　联动处理页面

<?php

$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代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="../../jquery-1.11.2.min.js"></script>

<script src="sanji.js"></script>

</head>

<body>

<div id="sanji"></div>

</body>

</html>

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

// JavaScript Document

// JavaScript Document

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

	//加载三个下拉列表

    $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");

	//加载显示数据

	//加载省份

	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+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>";

					}

					$("#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+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>";

					}

					$("#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+"<option value='"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</option>";

					}

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

				}

		});

}

　最后是

<?php

$pcode = $_POST["pcode"];

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

$db = new LZY();

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

echo $db->JsonQuery($sql);

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

使用php ajax写省、市、区、三级联动的更多相关文章

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

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

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

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

  3. UIPickerView实现省 市 区三级联动

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

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

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

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

    JSP页面 <html> <head> <meta http-equiv="Content-Type" content="text/html ...

  6. jqeury-地区三级联动

    html+js <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  7. 补充:ajax PHP html js 实现 三级联动（省 市 区）

    html +  js   在一个页面 php

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

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

  9. AJAX实现三级联动

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

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

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

随机推荐

  1. vue.js学习笔记(二)：如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

  2. BNU Online Judge-34978-汉诺塔

    题目链接 http://www.bnuoj.com/bnuoj/problem_show.php?pid=34978 这题在比赛时AC了不过那时是根据测试数据  抱着来试一下的想法,没想就AC了,其实 ...

  3. 树莓派VNC搭建相关问题，啦啦啦~

    为了节省money,于是我决定用VNC界面来代替显示器,为后面做C++ Qt以及Python Qt开发打下基础,我别无选择!下面开始进入正题: 1-- 下载VNC-Viewer-6.0.1-Windo ...

  4. SDWebImage源码解读之SDWebImageManager

    第九篇 前言 SDWebImageManager是SDWebImage中最核心的类了,但是源代码确是非常简单的.之所以能做到这一点,都归功于功能的良好分类. 有了SDWebImageManager这个 ...

  5. canvas小程序-快跑程序员

    canvas不用说html5带来的好东西,游戏什么的,么么哒 记得有一天玩手机游戏,就是一个跳跃过柱子那种,其实元素很简单啊,app能开发,借助html5 canvas也可以啊, 于是就开始了. -- ...

  6. [html5] 学习笔记- 编辑API之Range对象（二）

    本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment ...

  7. [译] AR SDK的种类比你想得要多！这里介绍七个棒棒哒

    作者:Eddie Offermann 原文:There are dozens more Augmented Reality SDKs than you think! Here are seven gr ...

  8. Android名片扫描识别系统SDK

    Android名片扫描识别系统SDK 一.Android名片扫描识别系统应用背景 这些年,随着移动互联的发展,APP应用成爆发式的增长,在很多APP中都涉及到对名片信息的录入,如移动CRM.移动端OA ...

  9. j2se 总结

    j2se在学习第二遍的时候,感觉还是比较亲切的.

  10. headfirst设计模式（2）—观察者模式

    定义 观察者模式(有时又被称为发布(publish)-订阅(Subscribe)模式,在此种模式中,一个目标物件管理所有相依于它的观察者物件,并且在它本身的状态改变时主动发出通知.这通常透过呼叫各观察 ...