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

Posted 2020-10-13 心悲动我神

首先看下界面：

说到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);

    }