JQ+AJAX实现多级联动

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

JQ+AJAX实现多级联动

当前两级改变时,后边一级或两级都会改变:

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);
?>

  

上一篇:基于json的jquery地区联动探索


下一篇:修改bootstrap 的全局样式,bootstrap 3.0 是由html5和CSS 3组成的