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

中国省市区地址三级联动jQuery插件案例下载
中国省市区地址三级联动jQuery插件案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装可以通过npm ...
JQuery实现省市区的三级联动
JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...
中国省市区地址三级联动插件---jQuery Distpicker
插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...
多级联动系列——ajax调用XML实现三级联动
ajax 使用起来特别的方便,再也不操心浏览器兼容问题了.用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧. 首先写一个XML文件.data.xml <?xml ...
jquery ajax提交表单数据的两种方式
http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...
省市区(县)三级联动代码（js 数据源）
ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...
JavaScript实现省市区的三级联动
JavaScript实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...
js之省市区(县)三级联动效果
省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...
jQuery中开发插件的两种方式
jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

随机推荐

安装Oracle客户端时，检查系统要求时状态为错误的解决办法
这是我自己安装oracle11g至win7的错误记录: 正在检查操作系统要求... 要求的结果: 5.0,5.1,5.2,6.0 之一实际结果: 6.1 我换了 10g,11g从32bit到64bi ...
I2C controller core之Bit controller(04)
4) detect start/stop condition START- falling edge on SDA while SCL is high; STOP - rising edge on ...
Table边框使用总结，只显示你要显示的边框
表格的常用属性基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间隔, ...
[Intermediate Algorithm] - Everything Be True
题目所有的东西都是真的! 完善编辑器中的every函数,如果集合(collection)中的所有对象都存在对应的属性(pre),并且属性(pre)对应的值为真.函数返回ture.反之,返回false ...
Qt中采用多线程实现Socket编程
Socket通常也称作"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求. 本文介绍的是Qt中采用多线程Socket编程,由于工作的需要,开始 ...
mysql主主同步
Mysql 主主同步方案第一台机器主 [root@master ~]# vim /etc/my.cnf [mysqld] server-id=1 log-bin=mysql-binlog log-s ...
BZOJ 4999: This Problem Is Too Simple！ DFS序+LCA+树状数组+离线
Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) , ...
给数组增加remove函数
//给数组增加indexOf函数Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { ...
在vue项目中引用element-ui时让el-input 获取焦点的方法
在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI 在网上查找了很多方法,但是在实际使用中发现了一个问题无论是使用$ref获取inp ...
Problem 20
Problem 20 问题网址:https://projecteuler.net/problem=20 n! means n × (n − 1) × ... × 3 × 2 × 1阶乘For exam ...

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

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

随机推荐

热门专题