首页 > 代码库 > JQ+AJAX实现多级联动
JQ+AJAX实现多级联动
利用JQ与AJAX实现三级联动实现的效果：
当前两级改变时，后边一级或两级都会改变：
使用的数据库：
html代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="http://www.mamicode.com/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=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+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实现多级联动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。