THINKPHP + JQUERY 多级下拉列表联动
前几天学习到JQUERY AJAX那一节，有个LOAD 事件。学习完后就想能不能利用LOAD这个事件来写一个多级菜单的联动呢？经过1个多小时的时间，终于写出来了。哈哈，不知道这样写合不合理，发出来大家一起分享一下。本人是菜鸟刚学习PHP不久，如果写的不好，请多指教。如果大家还有更好的改进那就更好了。
思路原理：利用jquery的change事件来触发 load事件，load事件将获取到的下拉菜单的ID值传给 模块下的方法，通过方法来找到下一级菜单的数据表，查询出符合条件的记录。最后输出到页面里。
以下是原代码和数据库文件。
数据库文件:[attachment=35569]
classa :一级分类的表
classb:二级分类的表
classc：三级分类的表
classd:四级分类的表
如果还有级别分类，那还可以断续加。。。
一、首先建一个类文件IndexAction.class.php ..
<?php
class IndexAction extends Action {
public function index(){
//一级分类就不用联动了，直接实例化表 输出模板就可以。
$m=M("Classa");
$query=$m->select();
$this->assign("data",$query);
//var_dump($query);
$this->display();
}
public function classa(){ //一级分类联动二级分类
//var_dump($_POST["data"]);
//echo $_POST["data"];
$classa_id=$_POST["data"]; //接收模板文件jquery $(load)传来参数。data
$m=M("Classb");
$where["classa_id"]=$classa_id;
$query=$m->where($where)->select(); //在二级分类表classb里找出字段class_id=$class_id
//var_dump($query[0][id]);
if($query){ //判断如果有数据就显示 二级分类 如果无数据就显示 无分类
$temp="<option selected="selected">二级分类</option>";
}else{
$temp="<option selected="selected">无分类</option>";
}
//循环数组
foreach ($query as $key=>$value)
{
$temp.="<option value="".$query[$key]["id"]."">".$query[$key]["classname"]."</option>";
}
//var_dump($query);
//echo $m->getLastSql();
echo $temp;
}
public function classb(){ //二级分类联动三级分类
//var_dump($_POST["data"]);
//echo $_POST["data"];
$classb_id=$_POST["data"]; //接收模板文件jquery $(load)传来参数。data
$m=M("Classc");
$where["classb_id"]=$classb_id;
$query=$m->where($where)->select(); //在三级分类表classc里找出字段classB_id=$classb_id
//var_dump($query[0][id]);
if($query){ //判断如果有数据就显示 二级分类 如果无数据就显示 无分类
$temp="<option selected="selected">三级分类</option>";
}else{
$temp="<option selected="selected">无分类</option>";
}
//循环数组
foreach ($query as $key=>$value)
{
$temp.="<option value=".$query[$key]["id"].">".$query[$key]["classname"]."</option>";
}
//var_dump($query);
//echo $m->getLastSql();
echo $temp;
}
public function classc(){ //三级分类联动四级分类
//var_dump($_POST["data"]);
//echo $_POST["data"];
$classc_id=$_POST["data"]; //接收模板文件jquery $(load)传来参数。data
$m=M("Classd");
$where["classc_id"]=$classc_id;
$query=$m->where($where)->select(); //在四级分类表classd里找出字段classc_id=$classc_id
//var_dump($query[0][id]);
if($query){ //判断如果有数据就显示
$temp="<option selected="selected">四级分类</option>";
}else{
$temp="<option selected="selected">无分类</option>";
}
//循环数组
foreach ($query as $key=>$value)
{
$temp.="<option value=".$query[$key]["id"].">".$query[$key]["classname"]."</option>";
}
//var_dump($query);
//echo $m->getLastSql();
echo $temp;
}
}
二、模板文件index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//一级分类联动二级分类
$("#classa").change(function(){
var val=$(this).val();
//alert(val);
$("#classb").load("__URL__/classa",{data:val});
});
//二级分类联动三级分类
$("#classb").change(function(){
var val=$(this).val();
//alert(val);
$("#classc").load("__URL__/classb",{data:val});
});
//三级分类联动四级分类
$("#classc").change(function(){
var val=$(this).val();
//alert(val);
$("#classd").load("__URL__/classc",{data:val});
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>公司名：
<input type="text" name="name" id="name" />
</p>
<p>类型：
<select name="classa" id="classa">
<option selected="selected">一级分类</option>
<volist name="data" id="val">
<option value="{$val["id"]}">{$val["classname"]}</option>
</volist>
</select>
----
<select name="classb" id="classb">
</select>
---
<select name="classc" id="classc">
</select>
---
<select name="classd" id="classd">
</select>
<span>添加</span>
</p>
<p> </p>
<p>内容：
<textarea name="content" id="content" cols="45" rows="5"></textarea>
</p>
<p>
<input type="submit" name="button2" id="button2" value="提交" />
</p>
</form>
</body>
</html>
思路原理：利用jquery的change事件来触发 load事件，load事件将获取到的下拉菜单的ID值传给 模块下的方法，通过方法来找到下一级菜单的数据表，查询出符合条件的记录。最后输出到页面里。
以下是原代码和数据库文件。
数据库文件:[attachment=35569]
classa :一级分类的表
classb:二级分类的表
classc：三级分类的表
classd:四级分类的表
如果还有级别分类，那还可以断续加。。。
一、首先建一个类文件IndexAction.class.php ..
<?php
class IndexAction extends Action {
public function index(){
//一级分类就不用联动了，直接实例化表 输出模板就可以。
$m=M("Classa");
$query=$m->select();
$this->assign("data",$query);
//var_dump($query);
$this->display();
}
public function classa(){ //一级分类联动二级分类
//var_dump($_POST["data"]);
//echo $_POST["data"];
$classa_id=$_POST["data"]; //接收模板文件jquery $(load)传来参数。data
$m=M("Classb");
$where["classa_id"]=$classa_id;
$query=$m->where($where)->select(); //在二级分类表classb里找出字段class_id=$class_id
//var_dump($query[0][id]);
if($query){ //判断如果有数据就显示 二级分类 如果无数据就显示 无分类
$temp="<option selected="selected">二级分类</option>";
}else{
$temp="<option selected="selected">无分类</option>";
}
//循环数组
foreach ($query as $key=>$value)
{
$temp.="<option value="".$query[$key]["id"]."">".$query[$key]["classname"]."</option>";
}
//var_dump($query);
//echo $m->getLastSql();
echo $temp;
}
public function classb(){ //二级分类联动三级分类
//var_dump($_POST["data"]);
//echo $_POST["data"];
$classb_id=$_POST["data"]; //接收模板文件jquery $(load)传来参数。data
$m=M("Classc");
$where["classb_id"]=$classb_id;
$query=$m->where($where)->select(); //在三级分类表classc里找出字段classB_id=$classb_id
//var_dump($query[0][id]);
if($query){ //判断如果有数据就显示 二级分类 如果无数据就显示 无分类
$temp="<option selected="selected">三级分类</option>";
}else{
$temp="<option selected="selected">无分类</option>";
}
//循环数组
foreach ($query as $key=>$value)
{
$temp.="<option value=".$query[$key]["id"].">".$query[$key]["classname"]."</option>";
}
//var_dump($query);
//echo $m->getLastSql();
echo $temp;
}
public function classc(){ //三级分类联动四级分类
//var_dump($_POST["data"]);
//echo $_POST["data"];
$classc_id=$_POST["data"]; //接收模板文件jquery $(load)传来参数。data
$m=M("Classd");
$where["classc_id"]=$classc_id;
$query=$m->where($where)->select(); //在四级分类表classd里找出字段classc_id=$classc_id
//var_dump($query[0][id]);
if($query){ //判断如果有数据就显示
$temp="<option selected="selected">四级分类</option>";
}else{
$temp="<option selected="selected">无分类</option>";
}
//循环数组
foreach ($query as $key=>$value)
{
$temp.="<option value=".$query[$key]["id"].">".$query[$key]["classname"]."</option>";
}
//var_dump($query);
//echo $m->getLastSql();
echo $temp;
}
}
二、模板文件index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//一级分类联动二级分类
$("#classa").change(function(){
var val=$(this).val();
//alert(val);
$("#classb").load("__URL__/classa",{data:val});
});
//二级分类联动三级分类
$("#classb").change(function(){
var val=$(this).val();
//alert(val);
$("#classc").load("__URL__/classb",{data:val});
});
//三级分类联动四级分类
$("#classc").change(function(){
var val=$(this).val();
//alert(val);
$("#classd").load("__URL__/classc",{data:val});
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>公司名：
<input type="text" name="name" id="name" />
</p>
<p>类型：
<select name="classa" id="classa">
<option selected="selected">一级分类</option>
<volist name="data" id="val">
<option value="{$val["id"]}">{$val["classname"]}</option>
</volist>
</select>
----
<select name="classb" id="classb">
</select>
---
<select name="classc" id="classc">
</select>
---
<select name="classd" id="classd">
</select>
<span>添加</span>
</p>
<p> </p>
<p>内容：
<textarea name="content" id="content" cols="45" rows="5"></textarea>
</p>
<p>
<input type="submit" name="button2" id="button2" value="提交" />
</p>
</form>
</body>
</html>
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
