使用layarea组件的城市选择器selectY完成省市区级联

分享 未结 8 797
cuihuazhang
cuihuazhang 2020-5-22
悬赏:20飞吻
一共是三个步骤(参考别人写的,自己做些总结哈,大家多提提意见哈)
首先引用selectY.js
1.找到一个省市区的json数据

数据链接:https://blog.csdn.net/x_hazel/article/details/82966248
2.由于js省市区的数据和selectY规定的不一样,这个时候就需要我们自己转格式了
selectY规定的数据格式为:"id":2,"pid":0,"name":"\u5317\u4eac\u5e02","code":110000

var citys=省市区的json数据;
var cityss = [];
for (var i in citys) {

cityss[i] = { "id": i, "pid": 0, 'name': citys[i]['name'], "code": i }

for (var j in citys[i]['child']) {
cityss[j] = { "id": j, "pid": i, 'name': citys[i]['child'][j]['name'], "code": j }

for (var k in citys[i]['child'][j]['child']) {
cityss[k] = { "id": k, "pid": j, 'name': citys[i]['child'][j]['child'][k], "code": k }
}

}

}
var kk = 0;
var area = [];
for (var i in cityss) {
area[kk] = cityss[i];
kk++
}

console.dir(area);
var data = area;
3.把转好的数据放入selectY中渲染就可以了

layui.use('selectY', function () {
console.log(data);
var selectY = layui.selectY;
selectY({
elem: '#demo',
data: data,
placeholder: '请选择地址',
disabledTips: '当前区域没有产品',
success: function (e) {
console.log(e.data);
console.log(e.ids);
}
});

})

原文参考于:https://blog.csdn.net/qq_39418742/article/details/99415242
回帖