三级联动
程序员文章站
2024-03-14 20:28:46
...
引入插件的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]
});
});
上一篇: centOS安装jdk1.8
下一篇: 三级联动?