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); }

 

转载于:https://www.cnblogs.com/lzy007/p/7799542.html