文档章节

ThinkPHP + Ajax 实现2级联动下拉菜单

Jceee
 Jceee
发布于 2014/04/07 18:47
字数 975
阅读 6924
收藏 6

       首先是数据库的设计。分类表叫cate.

       我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 

       父id的设置: 若数据没有上一级,则父id为0,若有上级,则父id为上一级的id。

       数据库有内容后,就可以开始写代码,进行二级联动的实现。

       先在后台php获取所有pid为0的数据,保存到$cate中,然后在第一层的<select>中用foreach循环输出。

       Html代码:

                   <select name="type" size="1" id="type">
                       <option>请选择类型</option>
                        <foreach name='cate' item='v'>
                            <option value="{$v['ca_id']}">{$v.ca_name}</option>
                        </foreach>
                    </select>
                    标签:
                    <select name="lable" size="1" id="lables">
                    </select>

      Ajax代码:

  $('#type').click(function(){
            $(this).change(function(){
                var objectModel = {};
                var   value = $(this).val();
               var   type = $(this).attr('id');
                objectModel[type] =value;
                $.ajax({
                    cache:false,
                    type:"POST",
                    url:site.web+"lable",
                    dataType:"json",
                    data:objectModel,
                    timeout:30000,
                    error:function(){
                        alert(site.web+"lable");
                    },
                    success:function(data){
                        $("#lables").empty();
                        var count = data.length;
                        var i = 0;
                        var b="";
                           for(i=0;i<count;i++){
                               b+="<option value='"+data[i].ca_id+"'>"+data[i].ca_name+"</option>";
                           }
                        $("#lables").append(b);
                    }
                });
               });
        }
    );

       Ajax代码在第一层类型改变后触发,ajax方法的主要参数有

       1.url:后台接收ajax的地址;

      2.data:传到后台的数据,一般用json传递;这里传递的是选中类的id值。

      3.type:传递方法,有get和post方法,我一般用post,可以传输的数据比get多,安全性也高些;

      4.error:ajax执行失败的方法;

      5.success:ajax执行成功的方法,也就是回调函数。这里在执行success时,我先用empty()清空了第二个下拉菜单的内容,然后再输出从后台获取的数据。

       下面是Thinkphp接收ajax数据并处理的页面

    //后台ajax验证
        $result = array();
        $cate =$_POST['type'];
        $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select();
        $this->ajaxReturn($result,"JSON");

      Thinkphp的I()方法其实可以看成$_POST[],这样来获取ajax传递过来的第一层选中内容的id,接着,获取其子类,然后用ajaxReturn()返回给ajax,这里设置了返回数据以json形式,所以ajax会以json形式接收到数据

      原生php的返回数据方式:

   //搜索结果为$result
   .....
   echo json_encode($result);

      

      这样就完成了2级联动下拉菜单的实现,需要注意的是,url得保证正确,后台接收到也需要有返回值,不然ajax也不会执行success方法的。

//------------------------------------------------------------------------------------------------------------------------------------------------------------------------

      2015-08-9

      经过优化的多级联动: 

      其实这块可以用于2级联动或以上的联动    

<select class="link_age" change-select="link_tow" name="name1">
<!-- 
select中的 option 的结构统一如下:
 -->
    <option value="1">typeName</option>
    <option value="2">typeName2</option>
</select>
<select class="link_age link_tow" change-select="link_three" name="name2"></select>
<select class="link_age link_three" change-select="link_four" name="name3"></select>
<select class="link_four" name="name4"></select>

<script type="text/javascript">
 <!--//<![CDATA[
    $('.link_age').change(function(){
        var objectModel = {};
        var value = $(this).val();
        var type = $(this).attr('id');
        var change_select = $(this).attr('change-select');//需要被改变的select内容
        objectModel[type] =value;

        $.ajax({
            cache:false,
            type:"POST",
            url:"http://test.jceee.com/jceeeTest.php" //请换上自己的接口地址 
            dataType:"json",
            data:objectModel,
            timeout:30000,
            error:function(){
                alert(site.web+"lable");
            },
            success:function(data){
                $("." + change_select).empty();
                var count = data.length;
                var i = 0;
                var b="";
                if (count > 0) {
	                for ( i = 0; i < count; i ++) {
	                   b += "<option value='" + data[i].ca_id + "'>";
	                   b += data[i].ca_name+"</option>";
	                }
                }
                $("." + change_select).append(b);
            }
        });
    });
    //]]>-->

</script>

   需要增加或删减联动,只需要改html代码:

<select class="link_age link_two" change-select="link_three"></select> 
属性class:
----link_age是必要的类属性,用于数据改变时,触发ajax,如果没有下一级,就不需要加上了。
----link_two这个值需要唯一,如这个例子是link_two,其上级link_one的change-select(影响的联动菜单)所指向的就是link_two. 回调时会对应地修改其内容。
属性change-select
这个属性所填的是回调后修改内容的class


© 著作权归作者所有

Jceee
粉丝 17
博文 47
码字总数 19440
作品 0
广州
程序员
私信 提问
加载中

评论(7)

tamn
tamn
感谢!!
Jceee
Jceee 博主
写了个可以多级联动的小模块,需要的朋友可以看一下,在原来博文的下面
Jceee
Jceee 博主

引用来自“程序小生”的评论

怎么联动三级呢??1515
同理,二级的内容是第一级选择后触发ajax后获取的,那么第三级就是第二级选择结束后,再触发方法,发送ajax请求,将第二级选择到的id当作pid传到ThinkPHP后台接口,获取内容。
程序小生
程序小生
怎么联动三级呢??1515
nosnail
nosnail
超级感谢4242
Jceee
Jceee 博主

引用来自“j_u_n”的评论

多谢啦,我正需要这样的例子13
相互进步
j
j_u_n
多谢啦,我正需要这样的例子13
PHP学习路线图 最全PHP自学指南

对于广大零基础的PHP自学者,往往不知道如何系统的学习PHP,导致平白浪费了很多时间。本文将为大家带来最详细的php学习路线图,同时还会附上相应的权威教程,让广大PHP自学者少走许多弯路。 ...

W3Cschool小编
2018/04/24
0
0
Thinkphp 3.1.2 视频教程震撼上线

期待已久的TP视频教程,经千呼、历万唤,经由TP团队和Lamp兄弟连联合精心制作,正式隆重登场了,这里有最专业的导师,这里有最权威的TP知识,这里有最强大的TP技术团队,在这里,就让我们通过...

麦当苗儿
2013/04/25
4.9K
30
thinkphp使用Ueditor编辑器写入数据库单双引号转义问题

http://www.poluoluo.com/jzxy/201208/172927.html thinkphp使用Ueditor编辑器写入数据库单双引号转义问题 Posted by 萧猫on 十二月 18, 2013 开发备忘/语录 在ThinkPHP中提交表单插入数据的...

KavenSu
2014/06/27
2K
0
七年相伴,奉献传承 ThinkPHP七周年

从2006年第一个雏形版本发布至今,ThinkPHP七年以来一直致力于为敏捷web应用开发和简化企业应用开发提供免费开源框架,并在7年的时间内不断优化创新,一路秉承简洁实用的原则,更方便更稳定地...

流年
2013/01/15
4.3K
26
php开发笔记-windows-linux-thinkphp开发环境搭建

文章来自我的博客:https://www.lwxshow.com/dev/php/thinkphp-configuration-environment.html 使用最新版本的3.1.3版本 php开发笔记-windows-thinkphp开发环境搭建 1.下载ThinkPHP框架 http...

卢卫湘
2013/06/09
844
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
7
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
7
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
9
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部