首先看下界面:
说到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三级联动(求思路更好)
原文地址:http://www.cnblogs.com/lzy007/p/7799542.html