类别联动下拉菜单

适用范围:省市无限级联动,商品类别无限极联动

需要使用到的jQuery插件为cxselect,ok说不清楚,还是直接上代码比较直观

HTML代码如下:

<div id="element_id" class="formControls col-xs-8 col-sm-9">
      <select class="select1" id="cate" name="category[]" data-value="" data-first-title="----全部----" style="height:30px;"></select> 
      <select class="select2" id="cate" name="category[]" data-value="" data-first-title="----全部----" style="height:30px;"></select> 
      <select class="select3" id="cate" name="category[]" data-value="" data-first-title="----全部----" style="height:30px;"></select>
      <select class="select4" id="cate" name="category[]" data-value="" data-first-title="----全部----" style="height:30px;"></select>
      <select class="select5" id="cate" name="category[]" data-value="" data-first-title="----全部----" style="height:30px;"></select> 
</div>

js代码如下:

 1 <script type="text/javascript" src="__STATIC__/admin/js/cxselect/jquery.cxselect.min.js"></script>
 2 
 3 function checkForm(){
 4     var categorys = [];
 5     $("#cate").each(function () {
 6         var val = $(this).val();
 7         if (val != "") {
 8             categorys.push(val);
 9         }
10     });
11     if (categorys.length == 0) {
12         alert("请选择类别。");
13         return false;
14     }
15     return true;
16 }
17 
18 $.cxSelect.defaults.url = '/category/category.json';
19 $('#element_id').cxSelect({
20     selects: ['select1', 'select2', 'select3', 'select4', 'select5'],
21     nodata: 'none',
22     required:false,
23     firstTitle:'----全部----',
24     firstValue:''
25 });

category.json文件需要在类别管理中生成所有类别的json文件,php控制器代码如下:

1     /*生成类别json数据*/
2     public function createJson(){
3         $categoryModel = new CateModel();
4         if($categoryModel->wirteJson()){
5             echo "<script>alert('类别数据生成成功!');location.href='index';</script>";
6         }else{
7             echo "<script>alert('类别数据生成失败!');location.href='index';</script>";
8         }
9     }

php模型代码如下:

 1 /*生成类别JSON数据*/
 2 public function wirteJson(){
 3     $dataInfo = 	hinkDb::query("select id as v,name as n,pid from think_pro_category");
 4     $data = $this->getCategoryJson($dataInfo);
 5     return $data;
 6 }
 7 
 8 /**
 9  * 功能:无限级类别json数据生成
10  * 参数:$data 类别查询结果集
11  * 返回值:$json 递归查询排序后的json数据
12  */
13 public function getCategoryJson($dataInfo) {
14     /*生成json数据*/
15     foreach($dataInfo as $category) {
16         $tree[$category['v']] = $category;
17         $tree[$category['v']]['s'] = array();
18     }
19     $content = json_encode(generateTree($tree));
20     $content = str_replace(',"s":[]', "", $content);
21     // for( $i = 0; $i < count($dataInfo); $i++ ) {
22     //     $content = str_replace('"'.$dataInfo[$i]['v'].'":', "", $content);
23     // }
24     //$content = '['.substr($content,1,strlen($content)-2).']';
25     //return $content;
26     /*写入文件*/
27     //文件存放路径
28     $filePath = $_SERVER['DOCUMENT_ROOT'].DS.'/category/category.json';
29     $returnval = file_put_contents($filePath,$content);
30     // $fopen = fopen($filePath,'w+');
31     // fwrite($fopen,$content);
32     // fclose($fopen);
33     return $returnval;
34 }

公共函数:

 1 /**
 2  *处理分类数组
 3 **/
 4 function generateTree($items) {
 5     $tree = array();
 6     foreach($items as $item){
 7         if(isset($items[$item['pid']])){
 8             $items[$item['pid']]['s'][] = &$items[$item['v']];
 9         }else{
10             $tree[] = &$items[$item['v']];
11         }
12     }
13     return $tree;
14 }
原文地址:https://www.cnblogs.com/walblog/p/8036389.html