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

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. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  2. JQuery实现省市区的三级联动

    JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...

  3. 中国省市区地址三级联动插件---jQuery Distpicker

    插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...

  4. 多级联动系列——ajax调用XML实现三级联动

    ajax 使用起来特别的方便,再也不操心浏览器兼容问题了.用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧. 首先写一个XML文件.data.xml <?xml ...

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

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

  6. 省市区(县)三级联动代码（js 数据源）

    ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...

  7. JavaScript实现省市区的三级联动

    JavaScript实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...

  8. js之省市区(县)三级联动效果

    省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...

  9. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

随机推荐

  1. POST请求成功，但接口返回数据不正确

    事件:使用Jmeter做APP的搜索接口测试,请求成功了,但无论keyword是什么“内容”(这里的内容是带引号的哦),接口返回的内容都是:未匹配到搜索结果 排查问题: keyword=“世界” st ...

  2. apicloud图片上传

    app中的图片上传,例如:个人信息页面,上传头像 使用: UIMediaScanner 地址: https://docs.apicloud.com/Client-API/UI-Layout/UIMed ...

  3. webpack核心提炼

    基本是学习的时候在网上整理的资料,并非自己原创,这篇文章的的主要目的是记录webpack.config.js的配置方式.可能也有不少错误,欢迎指正!! 一.应用场景 前端模块化开发.功能拓展.css预 ...

  4. AndroidStudio 内存泄漏的分析过程

    前言部分这次泄漏是自己代码写的太随意引起的,讲道理,代码写的太为所欲为了,导致有些问题根本就很难发现. 泄漏产生的原因,由于activity未被回收导致.这里给我们提出的一个警示,在使用上下文的时候, ...

  5. Django MVC与MTV概念 Ajax、分页实现

     MVC与MTV概念 MTV与MVC(了解)        MTV模型(django):            M:模型层(models.py)            T:templates      ...

  6. C语言中时钟编程

    目录 C语言中时钟编程 1. 文章目的 2.基本概念 2.1 UTC时间 2.2 UNIX纪元时间 2.3 格林威治时间 (GMT) 3.时间转换 3.1 asctime函数 3.2 ctime函数 ...

  7. appium的截图

    在实际自动化项目运行过程中,很多时候App可以会出现各种异常,为了更好的定位问题,除了捕捉日志我们还需要对运行时的设备状态来进行截屏.从而达到一种“有图有真相”的效果. 截图方法 方法1 save_s ...

  8. 51nod1079 中国剩余定理【数论】

    一个正整数K,给出K Mod 一些质数的结果,求符合条件的最小的K.例如,K % 2 = 1, K % 3 = 2, K % 5 = 3.符合条件的最小的K = 23. Input 第1行:1个数N表 ...

  9. 设置随机 User-Agent

    本文转载自以下网站: Scrapy 中设置随机 User-Agent 的方法汇总 https://www.makcyun.top/web_scraping_withpython14.html 一行代码 ...

  10. greenplum数据迁移

    源集群: 登录集群su - gpadminpsql -d postgres查询数据库信息\l查询用户信息\du 备份需要迁移的库到指定目录pg_dump -C testdata > /home/ ...