三级联动

这里写图片描述

引入插件的css和js代码：

<link href="./css/LArea.css" rel="stylesheet" >
<script src="./js/LAreaData1.js"></script>
<script src="./js/LArea.js"></script>

html代码：

            <div class="form-com area"><label for="">区域：</label><input type="text" id="demo1" value="" readonly placeholder="区域选择"><input type="hidden" id="value1" name="">           </div>

获取后端返回的数据源和初始化插件：

// 获取三级联动的数据function getliandong(callback){// Action=GetAllRegions&UserId=79651$.ajax({                type: "POST",               url: 'http://ptest.liby.com.cn/MessageTransfer.php?c=message&m=uatjson',dataType:"jsonp",// timeout : 50000,data:{posdata:{Action:'GetAllRegions',UserId:''},  },  success: function(data){// alert(data);data = JSON.parse(data);// console.dir(data);callback(data);// return data;} ,});}// 将三级联动的数据渲染到插件中var sanji = '';getliandong(function(data){sanji = data['data'];var list = [];var provs_data = [];var tmpj = 0;$.each(sanji,function(i){if(sanji[i]['Depth'] == 1){provs_data[tmpj] = {'text':sanji[i]['RegionName'],'value':sanji[i]['RegionId']}; tmpj++;}});var citys_data = {};$.each(provs_data,function(k){var arr = [];var tmpi = 0;$.each(sanji,function(j){if(sanji[j]['Depth'] == 2 && sanji[j]['ParentId'] == provs_data[k]['value']){arr[tmpi] = {'text':sanji[j]['RegionName'],'value':sanji[j]['RegionId']};// citys_data[sanji[j]['ParentId']] = arr;// citys_data[sanji[j]['ParentId']][tmpi] = {'text':sanji[j]['RegionName'],'value':sanji[j]['RegionId']};tmpi++;}});citys_data[provs_data[k]['value']] = arr;});var tmp2 = [];var tmpm = 0;$.each(sanji,function(m){if(sanji[m]['Depth'] == 2){tmp2[tmpm] = {'text':sanji[m]['RegionName'],'value':sanji[m]['RegionId']}; tmpm++;}});var dists_data = {};$.each(tmp2,function(l){var tmpk = 0;var arr = [];$.each(sanji,function(h){if(sanji[h]['Depth'] == 3 && sanji[h]['ParentId'] == tmp2[l]['value']){arr[tmpk] = {'text':sanji[h]['RegionName'],'value':sanji[h]['RegionId']};// citys_data[sanji[j]['ParentId']] = arr;// citys_data[sanji[j]['ParentId']][tmpi] = {'text':sanji[j]['RegionName'],'value':sanji[j]['RegionId']};tmpk++;}});dists_data[tmp2[l]['value']] = arr;});// delete citys_data['8822'];// 三级联动的初始化var area2 = new LArea();area2.init({'trigger': '#demo1','valueTo': '#value1','keys': {id: 'value',name: 'text'},'type': 2,'data': [provs_data, citys_data, dists_data]});});