thinkphp+jquery+ajax二級聯動使用心得

1、想實現的效果：

用thinkphp+jquery+ajax實現二級聯動，當所屬分類選擇媽咪英語時，下面所屬課程會自動列出媽咪英語下的子類。相似省市二級聯動

2、原理：

1.首先在後端一個方法中（不是處理ajax的方法）遍歷第一個下拉菜單的內容（這個可根據項目自由選擇，也能夠不用）
2.jquery給<select>change方法，點擊就使用ajax，後端單獨function一個方法ajax傳值給後端的這個方法中
3.後端處理，返回給前端一個json數據
4.前端得到json數據，可alert出一個json數據，可在network中具體查看json數據的內容

5.jquery取得數據，並賦給下級<select>標籤

3、資料和代碼：

數據庫：

前端代碼：這裏只要關注兩個<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