题目要求：

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

实现技术：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. Java中的封装、继承、多态

    封装 在如何理解面向对象这篇文章中,提到所谓的封装就是"功能都给你做好了,你不必去理解它是怎么写出来的,直接使用即可.".但你得清楚一点,那就是这句话是相对于使用者来说的,而作为开 ...

  2. php知识点总结（一）

    1.把数组以表格的形式显示 <?php $array = array( '书籍' =>  array( '生活',  '人与自然','动物世界'), '体育用品' =>  array ...

  3. 数据流程redux学习（一）

    思考题: react+redux开发这么一个原型,要怎么开发? 整个redux流程的逻辑非常清晰,数据流是单向循环的,就像一个生产的流水线: store(存放状态) -> Container(显 ...

  4. 性能监控之Java程序执行解析

    大家好,最近接触javassist技术,研究过程中对Java程序执行过程进行了一系列探索,弄清楚了几个盲区(仅针对个人而言),现将经验与大家分享. 1.编码->.java 通常指写代码的过程,最 ...

  5. JTable 的使用

    JTable是Swing编程中的一种控件. 一.创建表格控件的各种方式:1) 调用无参构造函数. JTable table = new JTable(); 2) 以表头和表数据创建表格. Object ...

  6. iOS核心笔记—源代码管理工具-SVN

    源代码管理工具-SVN 一. 源代码管理工具概述 1. 源代码管理工具的作用? > 能追踪一个项目从诞生一直到定案的过程 > 记录一个项目的所有内容变化,无限制返回 > 查看特定版本 ...

  7. C++编程练习(15)----“排序算法 之 归并排序“

    归并排序 归并排序(Merging Sort)的原理: 假设初始序列含有 n 个记录,则可以看成是 n 个有序的子序列,每个子序列的长度为1,然后两两归并,得到 [n/2] ([ x ] 表示不小于 ...

  8. 使用动态内置的JSON 数据源

    自从ActiveReports 11发布以来,一个重磅功能推出,为Web开发人员又带来一大福利.JSON数据常常会通过WebService来动态生成JSON数据,因此动态链接JSON 数据内置参数会更 ...

  9. cmake的两个命令： option 和 configure_file

    本节要讨论的是cmake的两个命令: option 和 configure_file option 选项,让你可以根据选项值进行条件编译. configure_file 配置文件,让你可以在代码文件中 ...

  10. SQL2012还原数据库操作在本地服务器上操作和用别的电脑远程连接到服务器进行操作的文件路径差异

    在数据库服务器上想还原一个数据库到某个备份文件时期的,服务器的数据库文件本身是保存在 D:\DEVDB目录 通过开发电脑上的MS manager来连接数据库服务器操作还原 虽发现文件卡项上,原始文件名 ...