js三级联动
2021-06-17 08:04
标签：三级联动 log i++ select logs value json 省市区三级联动 点击事件 原生js实现省市区三级联动 html部分代码 js代码 json数据 js三级联动 标签：三级联动 log i++ select logs value json 省市区三级联动 点击事件 原文地址：http://www.cnblogs.com/blogs-8888/p/7267412.html
(function(doc) {
if(data.code == 200) {
var result = data.result;
var poption, coption, aoption;
for(var i = 0; i ) {
poption = new Option(result[i].name, result[i].id);
doc.querySelector("#p").options.add(poption);
}
//省点击事件
doc.querySelector("#p").addEventListener("change", function() {
doc.querySelector("#c").length = 1;
doc.querySelector("#a").length = 1;
var pval = this.value;
for(var i = 0; i ) {
if(result[i].id == pval) {
var city = result[i].child;
for(var j = 0; j ) {
coption = new Option(city[j].name, city[j].id);
doc.querySelector("#c").options.add(coption);
}
return;
}
}
});
//市的点击事件
doc.querySelector("#c").addEventListener("change", function() {
doc.querySelector("#a").length = 1;
var cval = this.value;
for(var i = 0; i ) {
var city = result[i].child;
for(var j = 0; j ) {
if(city[j].id == cval) {
var aera = city[j].child;
for(var k = 0; k ) {
aoption = new Option(aera[k].name, aera[k].id);
doc.querySelector("#a").options.add(aoption);
}
}
}
}
});
}
}(document));
var data = {
"code": "200",
"msg": "success",
"result": [
{
"id": "01",
"name": "江苏省",
"child": [
{
"id": "011",
"name": "南京市",
"child": [
{
"id": "0111",
"name": "雨花台区"
}, {
"id": "0112",
"name": "秦淮区"
}, {
"id": "0113",
"name": "玄武区"
}, {
"id": "0114",
"name": "白下区"
}
]
}, {
"id": "012",
"name": "苏州市",
"child": [
{
"id": "0121",
"name": "吴中区"
}, {
"id": "0122",
"name": "姑苏区"
}, {
"id": "0123",
"name": "高新区"
}, {
"id": "0124",
"name": "开发区"
}
]
}, {
"id": "013",
"name": "扬州市",
"child": [
{
"id": "0131",
"name": "第一区"
}, {
"id": "0132",
"name": "第二区"
}, {
"id": "0133",
"name": "第三区"
}, {
"id": "0134",
"name": "第四区"
}
]
}
]
}, {
"id": "02",
"name": "浙江省",
"child": [
{
"id": "021",
"name": "杭州市",
"child": [
{
"id": "0211",
"name": "雨花台区"
}, {
"id": "0212",
"name": "秦淮区"
}, {
"id": "0213",
"name": "玄武区"
}, {
"id": "0214",
"name": "白下区"
}
]
}, {
"id": "022",
"name": "宁波市",
"child": [
{
"id": "0221",
"name": "吴中区"
}, {
"id": "0222",
"name": "姑苏区"
}, {
"id": "0223",
"name": "高新区"
}, {
"id": "0224",
"name": "开发区"
}
]
}, {
"id": "023",
"name": "温州市",
"child": [
{
"id": "0231",
"name": "第一区"
}, {
"id": "0232",
"name": "第二区"
}, {
"id": "0233",
"name": "第三区"
}, {
"id": "0234",
"name": "第四区"
}
]
}
]
}
]
}