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

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. 服务器证书安装配置指南（SLB）

    一.生成证书请求  1.下载CSR生成工具 您需要使用CSR生成工具来创建证书请求.  下载AutoCSR: http://www.itrus.cn/soft/autocsr.rar  2.生成服务器 ...

  2. 转：java实例化对象的过程

    学习JAVA这门面向对象的语言,实质就是不断地创建类,并把类实例化为对象并调用方法.对于初学JAVA的人总搞清楚对象是如何实例化的,假如类之间存在继承关系,那就更糊涂了.下面我们通过两个例题来说明对象 ...

  3. underscore.js,js工具库

    官方文档:http://underscorejs.org/ var totalCheckPriceVal = _.reduce(tableData[0],function(memo,num){ var ...

  4. Omi新成员omi-router正式发布

    原文链接-https://github.com/AlloyTeam/omi/blob/master/tutorial omi-router omi-router是Omi框架专属的router插件,文件 ...

  5. 使用VSCode 断点调试 js项目，html页面

    一.效果目的 1.在VSCode里,直接F5打开html页面,并且可以在编辑器里,进行断点调试js代码: 二.工具准备 1.VSCode 软件 2.一个js项目 3.VSCode 上装一个插件:Deb ...

  6. 老李分享：持续集成学好jenkins

    老李分享:持续集成学好jenkins   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest测试开发工程师就业培训请大 ...

  7. 测试开发Python培训：抓取新浪微博评论提取目标数据-技术篇

    测试开发Python培训:抓取新浪微博评论提取目标数据-技术篇   在前面我分享了几个新浪微博的自动化脚本的实现,下面我们继续实现新的需求,功能需求如下: 1,登陆微博 2,抓取评论页内容3,用正则表 ...

  8. 11.Linux用户管理

    本笔记说的Linux用户管理主要包括以下内容: 1.用户配置文件(/etc/passwd  /etc/shadow) 2.组配置文件(/etc/group  /etc/gshadow) 3.用户缺省配 ...

  9. JavaScript学习总结 之对象

    JavaScript学习总结(二) ---- 对象 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样, ...

  10. 数据源C3P0配置

    1.导入jar包(dbutil->QueryRunner) 2.C3P0Util工具类 package com.learning.utils; import java.beans.Propert ...