JQ+AJAX实现多级联动

Posted 发瑞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQ+AJAX实现多级联动相关的知识,希望对你有一定的参考价值。

利用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实现多级联动的主要内容,如果未能解决你的问题,请参考以下文章

Ajax-ajax实例4-多级联动菜单

几行代码实现多级ListView的多级联动效果

js中把ajax获取的数据转化成树状结构(并做成多级联动效果)

AngularJs 如何实现多级联动且最后一级下拉可以选择多个选项。请附上正确例子

selectmenu搜索下拉框实现多级联动,演示三级联动

Excel 如何实现五级下拉菜单联动