thinkphp+ajax 实现二级联动

<select name="" id="cattype">
                        <option value="">请选择类别</option>
                        <volist name="cate" id="val">
                        <option value="{$val.catid}">{$val.catname}</option>
                        </volist>
                    </select><select name="lable" id="catchild">
                    
                    </select>

 $("#cattype").change(function(){
        var   catid = $(this).val();   //获取切换的类别的id
        
        $.getJSON('getCate',{catid:catid},function(data){
           $('#catchild option[value!=""]').remove(); //清空option 每次改变option的时候载入新的数据
            //alert(data.length);
            if(catid==''){
            vals="<option value=''>"+data+"</option>";
            $(vals).appendTo("#catchild");
            }else{
            for(var i=0;i<data.length;i++){
                var vals='';
                vals+="<option value="+data[i].catid+">"+data[i].catname+"</option>";
                $(vals).appendTo("#catchild");
            }
            }
            
        })
    });

控制器端：
public function getCate(){
        $cate=M('Cate');
        $catid=isset($_GET['catid'])?$_GET['catid']:'';
        //print_r($catid);
        //echo $catid;
        if(!empty($catid)){
            $data=$cate->where(array('pid'=>$catid))->select();
            echo json_encode($data);
        }else{
            echo json_encode('请选择类别');
        }
        
        //print_r($res);
        //$this->ajaxReturn($data);
        
    }