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

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-15的更多相关文章

  1. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  2. 总结Ajax验证注册功能的两种方式

    方法一:使用jqueryForm插件提交表单注册 ①首先引入jquery和jqueryForm插件 <script type="text/javascript" src=&q ...

  3. 使用jQuery编辑删除页面内容，两种方式

    第一种,比较少的编辑用这种,直接在那块内容上编辑,失去焦点即完成 前几天做编辑框的时候,需要只修改一个状态 //编辑角色 function editTr($this){ thatTd=$($this) ...

  4. Jquery EasyUI修改行背景的两种方式

    1.数据加载完成不请求后台的做法 方式一: //更改表格行背景 function changeLineStyle(index){ var rows=$("#alertGird"). ...

  5. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

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

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

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

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

  8. 第117天：Ajax实现省市区三级联动

    Ajax实现省市区三级联动 思路: (1)首先获取省份信息 (2)发起Ajax请求,注意dataType中的T大写 (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建o ...

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

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

  10. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

随机推荐

  1. 聊一聊Python与C++的不同（二）

    今天我们聊一下基本数据类型吧, 在学习c++的时候我们要记住几种数据类型,int,float,double,long,char,double,string,bool,每次使用都要明确定义每个数据类型, ...

  2. Unity 3D Framework Designing(9)——构建统一的 Repository

    谈到 『Repository』 仓储模式,第一映像就是封装了对数据的访问和持久化.Repository 模式的理念核心是定义了一个规范,即接口『Interface』,在这个规范里面定义了访问以及持久化 ...

  3. Servlet过滤器和监听器知识总结(转)

    Servlet过滤器和监听器知识总结(转)  Servlet过滤器是 Servlet 程序的一种特殊用法,主要用来完成一些通用的操作,如编码的过滤.判断用户的登录状态.过滤器使得Servlet开发者能 ...

  4. sass.scss简单入门

    最近研究了一下sass和scss,清晰结构化,在某些地方的确强大,所以写了一篇入门教程,大概15分钟左右就能明白基本原理 什么是sass(css预处理器) Sass官网上是这样描述sass的,sass ...

  5. Ubuntu离线安装VSCode（附带前期准备工作）

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 在说正式步骤前先把准备工作做到位: 1.IP设置,这个因为是GUI的,手动设置 ...

  6. [SinGuLaRiTy] 字节大小

    [SinGuLaRiTy-1006] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 16位编译器 char 1个字节 char*(即指针变量 ...

  7. 【Electron】Electron开发入门（四）：操作PC端文件系统

    一.调用PC端默认方式打开本地文件 在main.js里 // 打开系统本地文件或者网页链接 const {shell} = require('electron'); // Open a local f ...

  8. WPF之路一：相对路径图片显示

    由于公司项目的需要,改为WPF开发,因此需要学习WPF,遇到的第一个问题就是在显示的图片的时候,写绝对路径,图片显示没有问题,但是写相对路径的时候,发现图片无法正常显示,在网上搜了一下,得到的答案是需 ...

  9. android 学习笔记(1)

    内容来源:高成珍.钟元生<Android编程经典案例>学习笔记 表格布局——TableLayout 表格布局以行和列的方式来管理界面的布局,但并不能明确声明包含几行几列.可通过TableR ...

  10. goagant：403. That’s an error.

    报错: . That’s an error. Your client does not have permission to get URL / from this server. That’s al ...