数据处理成为一下格式：
Array ( [goods_id] => 1 [goods_name] => 三星(SAMSUNG) W2016双卡双待 4G手机 尊贵金 4G标配版 [attr] => Array ( [70] => Array ( [attr_name] => 颜色 [attr_value] => Array ( [0] => Array ( [attr_value] => 土豪金 [goods_attr_id] => 3 ) [3] => Array ( [attr_value] => 金属黑 [goods_attr_id] => 6 ) ) ) [72] => Array ( [attr_name] => 选择版本 [attr_value] => Array ( [1] => Array ( [attr_value] => 双网通 [goods_attr_id] => 4 ) [2] => Array ( [attr_value] => 全网通 [goods_attr_id] => 5 ) ) ) ) ) 控制器层处理 public function product() { header('content-type:text/html;charset=utf-8'); $id= Request::instance()->get('id'); $pro = Db::table('goods') ->alias('a') ->where(['a.goods_id'=>$id]) ->join('goods_attr b','a.goods_id = b.goods_id') ->join('attribute c','b.attr_id = c.attr_id') ->select(); $arr=[]; foreach($pro as $key => $val) { static $i=0; $arr['goods_id'] = $val['goods_id']; $arr['goods_name'] = $val['goods_name']; $arr['attr'][$val['attr_id']]['attr_name'] = $val['attr_name']; $arr['attr'][$val['attr_id']]['attr_value'][$i]['attr_value'] = $val['attr_value']; $arr['attr'][$val['attr_id']]['attr_value'][$i]['goods_attr_id'] = $val['goods_attr_id']; $i++; } print_r($arr);die; $this->assign('arr',$arr); return view('product'); } 视图层处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .out{ border: 1px dashed #d6d6d8; color: #cdcdcd; cursor: not-allowed; margin: 0; } .che{ border: 2px solid #be0106; margin: -1px; } </style> <body> <table> <tr> <td>商品名称</td> <td>{$arr['goods_name']}</td> </tr> <tr> <td>商品价格</td> <td>520</td> </tr> {volist name="arr['attr']" id="arr"} <tr class="len"> <td>{$arr['attr_name']}</td> <td> {volist name="arr['attr_value']" id="val"} <span class="r" spec="{$val['goods_attr_id']}">{$val['goods_attr_id']}{$val['attr_value']}</span> {/volist} </td> </tr> {/volist} </table> </body> </html> <script src="__PUBLIC__jquery.1.12.min.js"></script> <script> $(function(){ var exist_arr =[]; //存在组合的货品，把不存在的框变为不可选 var tmp_arr;//值变数组，判断是否有类型 var now_checked = [];//同级元素 var check_group = ['3,4','5,6','3,6','6,4'];//本商品的全部单品 // var check_group = ['41,40','41,38'] var all_spec = $('.r'); check_no_spec(all_spec,check_group) $(".r").click(function(){ var _this = $(this); var id = _this.attr('spec'); //判断是否是不可点的属性 if(_this.hasClass("out")) { return false; }else{ add_red(_this) now_checked = checked_group_spec(_this); exit_spec = check_spec(id,check_group); console.log(now_checked) console.log(exit_spec) for(var j=0;j<all_spec.length;j++){ if($.inArray($(all_spec[j]).attr('spec'),now_checked)>=0){ }else if($.inArray($(all_spec[j]).attr('spec'),exit_spec)>=0){ $(all_spec[j]).hasClass('out')?$(all_spec[j]).removeClass('out'):''; }else{ $(all_spec[j]).hasClass('out')?$(all_spec[j]).removeClass('out'):$(all_spec[j]).addClass('out'); } } } }) //本商品全部属性 function goods_spec() { var r = $(".r"); var tmp_arr = []; for(var i=0;i<r.length;i++) { tmp_arr.push(r.eq(i).attr('spec')); } return tmp_arr; } //页面加载检测是否有不存在的数据 function check_no_spec(all_arr,yet_spec) { //将组合属性拆分 var tmp_yet_spec = []; for(var i=0;i<yet_spec.length;i++) { //临时数组 var tmp_arr = []; tmp_arr = yet_spec[i].split(','); for(var b=0;b<tmp_arr.length;b++) { tmp_yet_spec.push(tmp_arr[b]) } } //循环所有货品属性，查看是否存在本商品已有属性中 for(var i=0;i<all_arr.length;i++) { if($.inArray($(all_arr[i]).attr('spec'),tmp_yet_spec)<0) { $(all_arr[i]).addClass('out') } } } //add red function add_red(_this) { if(_this.siblings().hasClass("che")) { _this.siblings().removeClass("che") cancel(_this) }else{ cancel(_this) } } //选中&取消选中 function cancel(_this) { if(_this.hasClass('che')) { _this.removeClass('che') }else{ _this.addClass("che") } } //存在组合的货品，把不存在的框变为不可选 function remove_class() { var _this = $(".r"); for(var i=0;i<_this.length;i++) { // alert(exist_arr) // 对象_this.eq(i) 数组_this.[i] if($.inArray(_this.eq(i).attr('spec'),exist_arr)<0) { _this.eq(i).addClass("out"); } } } //存在的组合货品 function check_spec(id,check_group) { var tmp_exist = []; //循环所有货品 for(var i=0;i<check_group.length;i++) { //将单个货品分割成数组 tmp_arr = check_group[i].split(','); if($.inArray(id,tmp_arr)>=0) { for(var b=0;b<tmp_arr.length;b++) { if(id!=tmp_arr[b]) { tmp_exist.push(tmp_arr[b]) } } } } return tmp_exist; } //已选择的规格 function checked_group_spec($val) { var temp_spec = []; $data = $val.parent().children(); for(var i=0;i<$data.length;i++){ temp_spec.push($($data[i]).attr('spec')) } return temp_spec; } }) </script>