题目要求：

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

实现技术：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. php判断IE浏览器

    <?php/** * 检测用户当前浏览器 * @return boolean 是否ie浏览器 */ function chk_ie_browser() { $userbrowser = $_SE ...

  2. C的memcpy和strcpy的区别

    strcpy是拷贝字符串,以\0为标志结束(即一旦遇到数据值为0的内存地址拷贝过程即停止) strcpy的原型为 char *strcpy(char *dest, const char *src) 而 ...

  3. backbone 1.1.2 api

    Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...

  4. node源码详解（七） —— 文件异步io、线程池【互斥锁、条件变量、管道、事件对象】

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource7 本博客同步在https://cnodejs.o ...

  5. (汉化改进作品)BruteXSS：Xss漏洞扫描脚本

    今天给大家进行汉化改进的事一款脚本工具:BruteXSS,这款脚本能自动进行插入XSS,而且可以自定义攻击载荷. 该脚本也同时提供包含了一些绕过各种WAF(Web应用防护系统)的语句.   0×01简 ...

  6. T-SQL 语句

    表的创建:1.创建列(字段):列名+类型2.设置主键列(primary key):能够唯一标识一条数据3.设置唯一(unique):内容不能重复4.外键关系:一张表(从表)其中的某列引用自另外一张表( ...

  7. PLSQL DEVELOPER 使用的一些技巧【转】

    1.登录后默认自动选中My Objects 默认情况下,PLSQL Developer登录后,Brower里会选择All objects,如果你登录的用户是dba,要展开tables目录,正常情况都需 ...

  8. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  9. CSS3高级选择器

    CSS3中添加了一些新的选择器 与之前的不同 这些选择器有些类似于jquery的选择器 能够让我们更高的操作DOM 废话不多说 为了更直观的了解 我们以这段为实例 来进行操作 <!DOCTYPE ...

  10. 前端开发面试题总结之——HTML

    ______________________________________________________________________________________________ 相关知识点 ...