js三级联动（求思路更好）

首先看下界面：

说到select联动，我就想到用ajax获取数据加载出来。

然后就开始写，select被改变的时候，触发ajax去后台找数据，数据要自己下级分类数据和当前选择分类的商品数据。

写完之后，发现有些重复代码，获取商品这个数据，接口和js获取数据循环遍历代码好几处重复，触发三次选择框事件，都要获取对应分类的商品数据，所以要抽离出来。

 

前端js代码：

第一个选择框：

$("#pcate").change(function () {
         var pcate = this.value;
         $.getJSON('{php echo webUrl("order/print/ajaxCcate")}',{pcate:pcate},function (res) {

             if(res.status == 0){
                 var data = res.result;
                var html = '<option value="" selected>全部</option>';
                 if(data != ''){
                     $.each(data,function(index, category){
                         html += '<option value="' + category['id'] + '" >' + category['name'] + '</option>';
                     })  
                 }
                 getGoods();
                 $("#ccate").html("");
                 $("#ccate").html(html);
                 $("#tcate").html("<option value='' selected>全部</option>");

             }else{
                 $("#ccate").html("<option value='' selected>全部</option>");
                  $("#tcate").html("<option value='' selected>全部</option>");
                  $("#title").html("<option value='' selected>全部</option>");
             }
         })
     })

　　第二个选择框：

$("#ccate").change(function () {
         var ccate = this.value;
         var pcate = $("#pcate").val();
         $.getJSON('{php echo webUrl("order/print/ajaxTcate")}',{ccate:ccate,pcate:pcate},function(res){
             if(res.status == 0){
                 var data = res.result;
                 var html =　'<option value="" selected>全部</option>';

                 if(data != ''){
                     $.each(data,function (index, category) {
                         html += '<option value="' + category['id'] + '" >' + category['name'] + '</option>';
                     })
                 }
                 getGoods();
                 $("#tcate").html("");
                 $("#tcate").html(html);

             }else{
                 getGoods();
                 $("#tcate").html("<option value='' selected>全部</option>");
             }
         })
     })

第三选择框：

$("#tcate").change(function () {
         getGoods();
      
     })

　　获取商品：

function getGoods(){
        var p = $("#pcate").val();
        var c = $("#ccate").val();
        var t = $("#tcate").val();
        $.getJSON('{php echo webUrl("order/print/getGoods")}', {tcate:t,pcate:p,ccate:c}, function(res){
            if(res.status == 0){
                var data = res.result;
                var html =　'<option value="" selected>全部</option>';
                 if(data != ''){
                     $.each(data,function (index, category) {
                         html += '<option value="' + category['id'] + '" >' + category['title'] + '</option>';
                     })
                 }
                 $("#title").html("");
                 $("#title").html(html);
            }
      

后台接口：

public function ajaxCcate(){
        global $_GPC,$_W;
        $pcate = intval($_GPC['pcate']);
        if(empty($pcate)){
            return show_json(1);
        }
        $ccate = pdo_fetchall('SELECT name,level,id FROM'.tablename('ewei_shop_category').'WHERE uniacid = :uniacid AND parentid = :parentid AND level = 2 ORDER BY displayorder DESC',array(':uniacid'=>$_W['uniacid'],':parentid'=>$pcate));
      
        show_json(0,$ccate);
    }


    public function ajaxTcate(){
         global $_GPC,$_W;
        $ccate = intval($_GPC['ccate']);
        if(empty($ccate)) return show_json(1);
        $tcate = pdo_fetchall('select name,id from'.tablename('ewei_shop_category').'where uniacid = :uniacid and parentid = :parentid and level = 3 order by displayorder desc',array(':uniacid'=>$_W['uniacid'],':parentid'=> $ccate));

        show_json(0,$tcate);
    }

    
    public function getGoods(){
        global $_GPC,$_W;
        $con = '';
        $tcate = intval($_GPC['tcate']);
        $pcate = intval($_GPC['pcate']);
        $ccate = intval($_GPC['ccate']);
        if(!empty($pcate)) $con .= ' and pcate = '.$pcate;
        if(!empty($ccate)) $con .= ' and ccate = '.$ccate;
        if(!empty($tcate)) $con .= ' and tcate = '.$tcate;
        $sql = 'select title,id from'.tablename('ewei_shop_goods').'where uniacid = '.$_W['uniacid'].$con;
        $title = pdo_fetchall($sql);
        show_json(0,$title);

    }