（jquery+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14

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

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

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）
1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...
【JavaScript&jQuery】省市区三级联动
HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...
ajax省市区三级联动
jdbc+servlet+ajax开发省市区三级联动技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等宗旨:从实战中学习博 ...
JQuery+Json 省市区三级联动
一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...
用php+mysql+ajax+jquery做省市区三级联动
要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...
jquery全国省市区三级联动插件distpicker
使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...
用jQuery,ajax,实现三级联动封装JS的文件
// JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "< ...
JQ与AJAX 省市区三级联动下拉框
用于初学者学习基本的联动下拉框,废话不多说,见代码首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...
js&&jQuery实现省市区三级联动
代码参考了:https://codepen.io/anon/pen/WzyNQB;根据自己的需要修改了一下,挂个出处 1.前端页面代码 <html> <head> <me ...

随机推荐

将node.js程序作为服务，并在windows下开机自动启动（使用forever）
手上项目中有一块服务是用node.js实现的,运行环境是windows server 2008 R2,刚开始着手实现这块功能的时候时间很紧迫,随便写了个console程序就部署上去了--启动方式就是在 ...
MVC学习笔记1-MVC家族间的区别
ASP.NET下的MVC从原始的1.0走到2.0,再到3.0,现在走到4.0,也许明年5.0就问世了,先不管那些,那说说这些MVC在ASP.NET是如何变化发展的.对于.net编程人员来说可能会很熟悉 ...
OSPF相关知识与实例配置【第一部分】
OSPF相关知识与实例配置[基本知识及多区域配置] OSPF(开放式最短路径优先协议)是一个基于链路状态的IGP,相比于RIP有无环路:收敛快:扩展性好等优点,也是现在用的最多的:所以这次实验就针对于 ...
crontab的定时任务不能自动执行，但是手动执行脚本一直能成功
crontab 问题小记: 环境变量问题, 养成良好的习惯, 在脚本开头export PATH 原因是 crontab 执行定时任务时,用的不是系统环境变量,而是自己的环境变量,可以把 echo $P ...
机器学习:Python实现最小均方算法(lms)
lms算法跟Rosenblatt感知器相比,主要区别就是权值修正方法不一样.lms采用的是批量修正算法,Rosenblatt感知器使用的是单样本修正算法.两种算法都是单层感知器,也只适用于线性可分的 ...
【Electron】Electron开发入门（五）：项目打包
一.安装 electron-packager PS:安装之前,先复制一份package.json文件到./app目录下,然后改下./app目录下package.json里 "main&quo ...
Java基础之J2EE规范
什么是J2EE? 在企业级应用中,都有一些通用企业需求模块,如数据库连接,邮件服务,事务处理等.既然很多企业级应用都需要这些模块,一些大公司便开发了自己的通用模块服务,即中间件.这样一来,就避免了重复 ...
CSS基础布局--居中对齐，左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
firstElementChild&&firstChild
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
JavaWeb总结(六)—Session
一.Session的介绍在Web开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务器 ...

（jquery+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14

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

随机推荐

热门专题