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

一、想实现的效果：

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

二、原理：

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

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

三、资料和代码：

数据库：

前端代码：这里只要关注两个<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