首先，要实现如下图效果，

1、要理清思路：

先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容，第三个同理。

2、用到的数据库表：Chinastates表

规律：根据国家级（中国）的areacode查询省级(如：北京) ; 根据省级的areacode查询市级（如：北京市辖）；根据市级的areacode查询区级（如东城区）

第一种方式：没有用到封装，数据读取较慢，可以看看原理，这样在第二种方式封装时就容易多了。

代码如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

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

	</head>

	<body>

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

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

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

	</body>

</html>

<script type="text/javascript">

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

  	//输出省

  		var code = "0001";

  		$.ajax({

  			async:false,

  			//取消异步

	  		url:"chuli.php",

	  		data:{code:code},

	  		type:"POST",

	  		dataType:"TEXT",

	  		success:function(data){

		  			var hang = data.trim().split("|"); 	//trim()去空格

		  			var str="";

		  			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);

				}

	});

//输出市

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

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

		$.ajax({

			async:false,

			url:"chuli.php",

			data:{code:code2},

			type:"POST",

			dataType:"TEXT",

		success:function(data2){

				var hang2 = data2.trim().split("|");

				var str2 ="";

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

				{

					var lie2=hang2[i].split("^");

					str2 = str2 +"<option value ='"+lie2[0]+"'>"+lie2[1]+"</option>";

				}

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

			}

		});

	})

//输出区县

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

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

	$.ajax({

			async:false,

			url:"chuli.php",

			data:{code:code3},

			type:"POST",

			dataType:"TEXT",

			success:function(data3){

				var hang3 = data3.split("|");

				var str3 ="";

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

				{

					var lie3=hang3[i].split("^");

					str3 = str3 +"<option value ='"+lie3[0]+"'>"+lie3[1]+"</option>";

				}

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

			}

		});

  })

})

</script>

　　

　　期间出现的问题：每个下拉列表的第一个数据输不出来：是因为每个下拉列表的第一个数据的value值都带有空格！！！所以在输出data时要去空格！！！

data返回的值可能带有空格换行等，所以要用trim()方法去空格！！！

第二种方式：封装成插件，以后可以随时调用（重要）

（1）主页面：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>
//引入jquery包

		<script src="../jquery-1.11.2.min.js"></script>
//引用我们自己封装的js文件

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

	</head>

	<body>
//id要与封装的js插件中一致

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

	</body>

</html>

　　（2）我们自己封装的js插件

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

    //扔三个下拉列表到主页面建的div中

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

    //加载省的数据

    LoadSheng();

    //加载市的数据

    LoadShi();

    //加载区的数据

    LoadQu();

    //给省的下拉列表添加点击事件，当省变化时，对应的市和区会发生变化

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

        LoadShi();

        LoadQu();

    })

    //给市的下拉列表添加点击事件，当市变化时，对应的区发生变化

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

        LoadQu();

    })

});

//加载省的下拉列表

function LoadSheng() {

    var pcode = "0001";

    $.ajax({

        async: false,

        url: "chuli.php",

        data: { code: pcode },

        type: "POST",

        dataType: "TEXT",

        success: function(data) {

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

            var str = "";

            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 LoadShi() {

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

    $.ajax({

        async: false,

        url: "chuli.php",

        data: { code: pcode },

        type: "POST",

        dataType: "TEXT",

        success: function(data) {

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

            var str = "";

            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 LoadQu() {

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

    $.ajax({

        url: "chuli.php",

        data: { code: pcode },

        type: "POST",

        dataType: "TEXT",

        success: function(data) {

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

            var str = "";

            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);

        }

    });

}

　　

其次就是处理页面(两种方法都用到的)：chuli.php

<?php

$code=$_POST["code"];

require "DB.class.php";

$db=new DB();

$sql="select areacode,areaname from chinastates where parentareacode='{$code}'";

$str=$db->strquery($sql);

echo $str;

最后就是封装的类文件：DB.class.php

function strquery($sql)

	{

		$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);

		$result = $db ->query($sql);

		$arr =$result->fetch_all();

		$str="";

		foreach($arr as $v)

	 	{

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

		 }

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

	 	return $str;

			}

}

?>

　　

（jquery+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14的更多相关文章

  1. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  2. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  3. 【JavaScript&jQuery】省市区三级联动

    HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...

  4. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  5. JQuery+Json 省市区三级联动

    一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...

  6. 用php+mysql+ajax+jquery做省市区三级联动

    要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...

  7. jquery全国省市区三级联动插件distpicker

    使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...

  8. 用jQuery,ajax,实现三级联动封装JS的文件

    // JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "< ...

  9. JQ与AJAX 省市区三级联动下拉框

    用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...

  10. js&&jQuery实现省市区三级联动

    代码参考了:https://codepen.io/anon/pen/WzyNQB;根据自己的需要修改了一下,挂个出处 1.前端页面代码 <html> <head> <me ...

随机推荐

  1. 走入PHP-类与对象

    PHP中用class来定义类,用new实例化对象,用extends继承类,不过只能单继承,属性和方法有public.private和protected做访问控制,默认为public,在类里定义常量不需 ...

  2. Alamofire源码解读系列(十)之序列化(ResponseSerialization)

    本篇主要讲解Alamofire中如何把服务器返回的数据序列化 前言 和前边的文章不同, 在这一篇中,我想从程序的设计层次上解读ResponseSerialization这个文件.更直观的去探讨该功能是 ...

  3. String, StringBuilder, StringBuffer问题

    1. 区别 String为字符串常量,而StringBuilder和StringBuffer都是字符串变量,其中StringBuilder线程非安全,StringBuffer线程安全. 每次对 Str ...

  4. Hexo + Github Pages 搭建个人博客

    之前一直想搭建自己的博客,由于自己的懒惰拖到现在.好了,废话不多说!直接上干货! 安装Node.js 安装Git Github Pages配置 安装Hexo及主题设置 进阶篇-高级定制 其它实用功能 ...

  5. sublime Text3快捷键使用大全

    Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本.Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数名等.Ct ...

  6. jquery-ul-li实现分页功能 转载仅供交流

    js文件代码: (function($){ $.fn.Pages = function(options){ var opts = $.extend({},$.fn.Pages.defaults, op ...

  7. React+Redux学习笔记：React+Redux简易开发步骤

    前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...

  8. Java多线程学习笔记（一）——Thread类中方法介绍

    currentThread():返回代码正在被哪个线程调用. public class CurrentThreadWay { public static void main(String[] args ...

  9. Linux常用命令快查

    一.读取配置文件中某一个变量的值 假如有一个配置文件dubbo.properties,需要读取dubbo.application.name的值: dubbo.application.name=book ...

  10. Linux - IP数据报报头及个字段的意义

    IP数据报的格式: IP 数据报的首部长度和数据长度都是可变长的,但总是4字节的整数倍. 对于IPv4 ,4位版本字段是4. (1)版本 占4位,指IP协议的版本.通信双方使用的IP协议版本必须一致. ...