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实现多级联动的主要内容，如果未能解决你的问题，请参考以下文章
js中把ajax获取的数据转化成树状结构（并做成多级联动效果）