引入插件的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){
$.ajax({
type: "POST",
url: 'http://ptest.liby.com.cn/MessageTransfer.php?c=message&m=uatjson',
dataType:"jsonp",
data:{posdata:
{
Action:'GetAllRegions',
UserId:''
},
},
success: function(data){
data = JSON.parse(data);
callback(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']};
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']};
tmpk++;
}
});
dists_data[tmp2[l]['value']] = arr;
});
var area2 = new LArea();
area2.init({
'trigger': '#demo1',
'valueTo': '#value1',
'keys': {
id: 'value',
name: 'text'
},
'type': 2,
'data': [provs_data, citys_data, dists_data]
});
});