今日分享个三级联动

js代码

let xhr = new XMLHttpRequest();
// 创建一个新的XMLHttpRequest对象，命名为xhr。用来请求接口，处理异步操作；
// 这个对象用于在浏览器和服务器之间发送 HTTP 请求和接收响应。
xhr.open('get', 'js/index.json', true);
// 打开一个新的HTTP GET请求。// 请求的URL是'js/index.json'。// 第三个参数true表示请求是异步的。
xhr.send();
//发送要请求的要求
xhr.onreadystatechange = function() {
	// 设置一个事件监听器，当请求的状态发生变化时，这个函数就会被调用。
	if (xhr.readyState == 4 && xhr.status == 200) {
		// 检查请求是否已经完成（readyState == 4）并且是否成功（status == 200）。
		let text = xhr.responseText;
		// 获取响应的文本内容
		data = JSON.parse(text);
		// 将响应的文本内容解析为JSON对象，并将其赋值给变量data。
		item(data);
		//一进页面就渲染省级的数据，以方便点击省级时展现省级的数据
	}
};
let data = [];
//创建一个变量以方便存储数据
//获取想要的变量 省 市 区
//获取省市区三个下拉框
//用class选择器获取
let shengs = document.getElementsByClassName('shengs')[0];
let shis = document.getElementsByClassName('shis')[0];
let qus = document.getElementsByClassName('qus')[0];
//省市区三级联合
// 假设这是您的省份数据  
//在次选择请填写省份市都要重新渲染
// 省数据渲染 ，让一进页面就渲染
function item(data) {
	console.log(data)
	
	let str = "-请填写省份-";
	//命名str为请填写省份
	for (let i = 0; i < data.length; i++) {
	//遍历数据和数组
		console.log(data[i]);
		str += `${data[i].name}    `;
		//拼接省级的内容
	}
	shengs.innerHTML = str;
	//把渲染内容添加到省的下拉框中
}

// 市区数据渲染      
function shi() {
	console.log(shengs.value)
	// 选完省份后市和区级下拉框变为请填写市区
	let str = "-请填写市区-";
	//命名str为请填写市份
	console.log(data[shengs.value])
	for (let i = 0; i < data[shengs.value].children.length; i++) {
		//遍历省的值，也就是找省对应的市级数据
		//用省对应的下标去找市级数据
		console.log(data[shengs.value].children[i]);
		str += `
			  ${data[shengs.value].children[i].name}    
			`;
// 渲染市区下拉菜单函数  
	}
	shis.innerHTML = str;
	//把渲染内容添加到市的下拉框中
	//当选别的省和市时初始化
	qus.innerHTML = str;
	//把渲染内容添加到市的下拉框中
	//当选别的省和市时初始化
}
// 渲染区县下拉菜单函数 
function qu() {
	console.log(data[shengs.value].children)
	let str = "-请填写区县-";
	//命名str为请填写区县
	for (let i = 0; i < data[shengs.value].children[shis.value].children.length; i++) {
		//遍历省的值，也就是找省对应的市级数据的下标 的区级数据
		console.log(data[shengs.value].children[shis.value].children[i].name);
		str += `${data[shengs.value].children[shis.value].children[i].name}`;
	}
	//拼接从省的下标的市级数据的下标的区级数据
	qus.innerHTML = str;
	//把渲染内容添加到区级下拉框中
}
// 显示的内容为决定显示的字符串  
//在渲染里判断是否选择省份如果没选择省份就保持原样
// 如已经选择第二个就拼接请选择市，
// 如已经选择市份第三个就

html代码 

	
		
		
		
	
	
		
			-请选择省份-
			河南省
		
		
			-请选择省份-
		
		
			-请选择省份-
		
	
	

 

json数据

 

 

[{
		"name": "河南省",
		"children": [{
			"name": "商丘市",
			"children": [{
				"name": "城镇区"
			}, {
				"name": "上阵区"
			}]
		}, {
			"name": "上扬市",
			"children": [{
				"name": "上扬区"
			}]
		}]
	}, {
		"name": "河东省",
		"children": [{
				"name": "南阳市",
				"children": [{
					"name": "商城区"
				}, {
					"name": "商长区"
				}]
			},
			{
				"name": "菏泽市",
				"children": [{
					"name": "菏泽区"
				}]
			}
		]
	}, {
		"name": "江西省",
		"children": [{
				"name": "南昌市",
				"children": [{
						"name": "南昌区"
					},
					{
						"name": "九江区"
					}, {
						"name": "临川区"
					}
				]
			},
			{
				"name": "九江市",
				"children": [{
					"name": "九上区"
				}]
			}, {
				"name": "临川市",
				"children": [{
					"name": "临川区"
				}]
			}
		]
	},
	{
		"name": "东北省",
		"children": [{
			"name": "三栋市",
			"children": [{
				"name": "三一区"
			}]
		}]
	},
	{
		"name": "河北省",
		"children": [{
			"name": "石家庄市",
			"children": [{
				"name": "石家庄区"
			}]
		}]
	},
	{
		"name": "辽宁省",
		"children": [{
			"name": "沈阳市",
			"children": [{
				"name": "沈阳区"
			}, {
				"name": "皇姑区"
			}, {
				"name": "铁西区"
			}, {
				"name": "苏家屯区"
			}, {
				"name": "沈北新区"
			}]
		}, {
			"name": "抚顺市",
			"children": [{
				"name": "和平区"
			}, {
				"name": "沈河区"
			}, {
				"name": "大东区"
			}]
		}, {
			"name": "大连市",
			"children": [{
				"name": "于洪区"
			}, {
				"name": "辽中区"
			}]
		}]
	}, {
		"name": "黑龙江省",
		"children": [{
			"name": "哈尔滨市",
			"children": [{
				"name": "五常区"
			}, {
				"name": "双城区"
			}, {
				"name": "香坊区"
			}, {
				"name": "木兰县"
			}, {
				"name": "西安区"
			}]
		}, {
			"name": "齐齐哈尔市",
			"children": [{
				"name": "齐齐哈尔区"
			}, {
				"name": "东安区"
			}, {
				"name": "向阳区"
			}, {
				"name": "尖山区"
			}, {
				"name": "新兴区"
			}]
		}, {
			"name": "鹤岗市",
			"children": [{
				"name": "鹤岗区"
			}, {
				"name": "哈尔滨区"
			}, {
				"name": "道里区"
			}, {
				"name": "萨尔图区"
			}, {
				"name": "鸡冠区"
			}]
		}]
	}
]