码迷,mamicode.com
首页 > Web开发 > 详细

js三级联动(求思路更好)

时间:2017-11-07 17:52:06      阅读:359      评论:0      收藏:0      [点我收藏+]

标签:rip   hang   重复   title   order   获取   asc   tab   logs   

首先看下界面:

技术分享

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

    }

 

js三级联动(求思路更好)

标签:rip   hang   重复   title   order   获取   asc   tab   logs   

原文地址:http://www.cnblogs.com/lzy007/p/7799542.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!