THINKPHP + JQUERY 多级下拉列表联动

最新推荐文章于 2021-12-02 16:49:48 发布

creathly

最新推荐文章于 2021-12-02 16:49:48 发布

阅读量3.4k

点赞数

原文链接：http://bbs.php100.com/simple/?t502731.html

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>

creathly

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
THINKPHP + JQUERY 多级下拉列表联动

原文链接：http://bbs.php100.com/simple/?t502731.htmlTHINKPHP + JQUERY 多级下拉列表联动前几天学习到JQUERY AJAX那一节，有个LOAD 事件。学习完后就想能不能利用LOAD这个事件来写一个多级菜单的联动呢？经过1个多小时的时间，终于写出来了。哈哈，不知道这样写合不合理，发出来大家一起分享一下。本人是菜鸟刚学习PHP不
复制链接

扫一扫