利用JQ与AJAX实现三级联动实现的效果：

当前两级改变时，后边一级或两级都会改变：

使用的数据库：

html代码：

<!doctype html>

<html lang="en">

	<head>

		<meta charset="UTF-8" />

		<title>Document</title>

		<script src="jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<select  id="yiji"   >

		</select>

		<select  id="erji"   >

		</select>

		<select  id="sanji"  >

		</select>

	</body>

        </html>

　　

简而言之，做三个空的下拉列表，引入jq包。

逻辑上封装三个函数，分别是加载第一级，第二级和第三极的下拉列表，然后当第一级改变时，第二级改变；第二级改变时，第三极改变：

$(document).ready(function(e) {

		yiji();                           //第一级函数

		erji();                          //第二级函数

		sanji();                         //第三极函数

		$("#yiji").change(function(){

			erji();
　　　　　　　　　　　　　　　sanji();

		})

		$("#erji").change(function(){

			sanji();

		})

	});

　　

然后是三个函数的封装方法：

function yiji(){

			$.ajax({

				async:false,

				url:"yiji.php",

				dataType:"TEXT",

				success:function(r){

					var lie = r.split("|");

					var str = "";

					for(var i=0;i<lie.length;i++)

					{

						str +=" <option value='"+lie[i]+"' >"+lie[i]+"</option> ";

					}

					$("#yiji").html(str);	

				}

			});

		}

		//二级

			function erji(){

				var val = $("#yiji").val();

			$.ajax({

				async:false,

				url:"erji.php",

				dataType:"TEXT",

				data:{e:val},

				type:"POST",

				success:function(r){

					var lie = r.split("|");

					var str = "";

					for(var i=0;i<lie.length;i++)

					{

						str +=" <option value='"+lie[i]+"'>"+lie[i]+"</option> ";

					}

					$("#erji").html(str);

					}

				});

			}

			//三级

			function sanji(){

				var val = $("#erji").val();

				if(val!=="")                   //有些特别行政区没有下一区县，例如香港

				{

					$.ajax({

				url:"sanji.php",

				dataType:"TEXT",

				data:{e:val},

				type:"POST",

				success:function(r){

					var lie = r.split("|");

					var str = "";

					for(var i=0;i<lie.length;i++)

					{

						str +=" <option value='"+lie[i]+"'>"+lie[i]+"</option> ";

					}

					$("#sanji").html(str);

					}

				});

				}

				else{

					$("#sanji").empty();

				}

			}

　　

通过三个函数的处理界面，通过数据库访问将数据串接为字符串回转。

首先引入类文件：

DBDAA.class.php：

<?php

class DBDA {

	public $host = "localhost";

	public $uid = "root";

	public $pwd = "";

	public $dbname = "12345";

	//成员方法

	public function Query($sql, $type = 1) {

		$db = new MySQLi($this -> host, $this -> uid, $this -> pwd, $this -> dbname);

		$r = $db -> query($sql);

		if ($type == 1) {

			return $r -> fetch_all();

		} else {

			return $r;

		}

	}

	//返回字符串的方法

	public function StrQuery($sql, $type = 1) {

		$db = new MySQLi($this -> host, $this -> uid, $this -> pwd, $this -> dbname);

		$r = $db -> query($sql);

		if ($type == 1) {

			$attr = $r -> fetch_all();

			$str = "";

			foreach ($attr as $v) {

				$str .= implode("^", $v) . "|";

			}

			return substr($str, 0, strlen($str) - 1);

		} else {

			return $r;

		}

	}

}

　　

一级处理文件，yiji.php：

<?php

include("DBDAA.class.php");

$db = new DBDA();

$sql = " select areaname from chinastates where areacode  REGEXP  '^[[:digit:]]{2}$' ";

echo $db->StrQuery($sql);

?>

　

二级处理文件，erji.php：

<?php

include("DBDAA.class.php");

$db = new DBDA();

$e = $_POST["e"];

$sqll = " select areacode from chinastates where areaname = '{$e}'";

$atter = $db->Query($sqll);

$sql = " select areaname from chinastates where areacode  REGEXP  '^{$atter[0][0]}[[:digit:]]{2}$' ";

echo $db->StrQuery($sql);

?>

　　

三级处理文件，sanji.php：

<?php

include("DBDAA.class.php");

$db = new DBDA();

$e = $_POST["e"];

$sqll = " select areacode from chinastates where areaname = '{$e}'";

$atter = $db->Query($sqll);

$sql = " select areaname from chinastates where areacode  REGEXP  '^{$atter[0][0]}[[:digit:]]{2}$' ";

echo $db->StrQuery($sql);

?>

　　

JQ+AJAX实现多级联动的更多相关文章

  1. [ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板

    /** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.8 */ 接上一篇博客. 实现带缓存的仿亚马逊下拉面板 效果图: 图1 初始 图2 点击省份 ...

  2. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  3. DropDownList的多级联动

    DropDownList的多级联动的问题最典型的案例就是实现省市级三级联动的案例,对这个问题的描述是当选中山东省之后,在选择市的下拉菜单时,市一栏只出现山东省下面的市.对于县也是同样的道理. 我也做的 ...

  4. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  5. MVC实现多级联动

    前言 多级联动(省级联动)的效果,网上现成的都有很多,各种JS实现,Jquery实现等等,今天我们要讲的是在MVC里面,如何更方便.更轻量的实现省级联动呢? 实现效果如下: 具体实现 如图所示,在HT ...

  6. js 多级联动（省、市、区）

      js 多级联动(省.市.区) CreateTime--2018年4月9日17:10:38 Author:Marydon 方式一: 数据从数据库获取,ajax实现局部刷新 方式二: 数据从json文 ...

  7. 微信小程序-多级联动

    微信小程序中的多级联动 这里用到的案例是城市选择器 先上代码: .wxml <view class="{{boxHide}}"> <view>{{nian} ...

  8. PHP多级联动的学习（一）

    我尝试在ThinkCMF中实现多级联动,首先我开始看了dede的联动类别管理前后台的代码以及他的数据库,经过非常多次的尝试,我渐渐有了一点想法,并给予实施. 首先写出前台的界面.如图. 然后在数据库中 ...

  9. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

随机推荐

  1. iOS之Git的使用

    1.登录Git账号,创建一个新的仓库

  2. Android_Intent_passValue(4)

    xml布局文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns ...

  3. bootstrap在iis中发布后无法看到图标，字体样式

      因为框架使用了字体文件来显示矢量的图标,为了能在IIS上正常显示图标,可以通过增加iis的MIME-TYPE来支持图标字体文件:

  4. C++的三大特性之一继承

    一.继承的相关基本概念 1.继承的定义     在C++中,可以使用继承来使新类得到已定义的一些类中的特性,这就好比与孩子从父亲母亲得到遗传类似,所以我们称原有的类为基类或父类,用原有类来生成新的类的 ...

  5. 关于Eclipse中开发插件(二)

    原plugin.xml文件各个设置项的说明: 附上生成的文件代码: <?xml version="1.0" encoding="UTF-8"?> & ...

  6. Win7下简约的Gif查看器 仅1.8M

    win7下面由于版权的原因把,默认打开gif的是ie浏览器,这个多么的不方便呀,我在网上淘到了这个程序,话说是从Xp中提取移植过来的.用起来很不错. 下载地址在: http://pan.baidu.c ...

  7. python2 dir(list)

    >>> dir(list) ['__add__', '__class__', '__contains__', '__delattr__', '__delitem__', '__del ...

  8. HTTP 错误 500.21 - Internal Server Error的解决方案

    开始菜单>所有程序>附件>命令提示符(以管理员的身份运行) 然后运行下面的命令注册: 32位机器: C:\Windows\Microsoft.NET\Framework\v4.0.3 ...

  9. iOS -数据持久化之CoreData

    Core Data是iOS5之后才出现的一个框架,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数据库中的数据还原成OC对象.在此数 ...

  10. mysql net连接读取结果为乱码 Incorrect string value

    在mysql直接查询中文正常,通过连接到mysql读取中文内容为乱码.同时插入中文内容也失败提示 Incorrect string value: '\xBC\xA4\xB7\xA2\xBF\xB4.. ...