thinkphp+jquery+ajax二级联动使用心得

一、想实现的效果:

用thinkphp+jquery+ajax实现二级联动,当所属分类选择妈咪英语时,下面所属课程会自动列出妈咪英语下的子类。类似省市二级联动

《thinkphp+jquery+ajax二级联动使用心得》

二、原理:

1.首先在后端一个方法中(不是处理ajax的方法)遍历第一个下拉菜单的内容(这个可根据项目自由选择,也可以不用)
2.jquery给<select>change方法,点击就使用ajax,后端单独function一个方法ajax传值给后端的这个方法中
3.后端处理,返回给前端一个json数据
4.前端获得json数据,可alert出一个json数据,可在network中具体查看json数据的内容

《thinkphp+jquery+ajax二级联动使用心得》

5.jquery取得数据,并赋给下级<select>标签

三、资料和代码:

数据库:

《thinkphp+jquery+ajax二级联动使用心得》

前端代码:这里只要关注两个<select></select>里面的内容即可,其他不用考虑。注意id=main和id=follow,供jquery选择器使用

<div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>所属分类:</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
                <select name="" class="select" id="main">
                                    <option>请选择分类</option>  
                                    <foreach name="cat" item="vo">
                                    <option value="{$vo.catid}">{$vo.catname}</option>
                                    </foreach>
                </select>
                </span> </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>所属课程:</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
                <select name="" class="select" id="follow">
                    
                </select>
                </span> </div>
        </div>

jquery+ajax:
要先引用jquery

<script type="text/javascript">
    $("#main").change(function(){
         var catid=$("#main").val();
         $.post("{:U('Subject/subject_media_add_ajax')}","catid="+catid,function(data){
                        $("#follow").empty();
                        var count = data.length;
                        var i = 0;
                        var b="";
                           for(i=0;i<count;i++){
                               b+="<option value='"+data[i].subid+"'>"+data[i].subname+"</option>";
                           }
                        $("#follow").append(b);
            });    
    });
</script>

后端代码:
前期遍历,第一个下拉菜单的值从数据库取出

    //子课程添加
    public function subject_media_add(){
        $model=M("cat");
        $cat=$model->select();
        $this->assign("cat",$cat);
        $this->display();
    }//subject_media_add()end

处理ajax的方法

    //子课程添加ajax下拉菜单二级联动
    public function subject_media_add_ajax(){
        $id = $_POST['catid'];
        $subject=M("subject")->where(array("catid"=>$id))->select();
        $this->ajaxReturn($subject,"JSON");
    }//subject_media_add_ajax()end

感觉写的很详细啦,欢迎和我一起探讨哦,么么哒 QQ:755092893

    原文作者:李尚
    原文地址: https://segmentfault.com/a/1190000009477720
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞