4.18学习笔记 三级联动(对象实现)

根据选取的省会城市,相应的改变市级城市,再根据选取的市级城市,相应改变区级/街道

<select id="se1">
    <option value="">请选择市/地区</option>
</select>
<select id="se2">
    <option value="">请选择市/地区</option>
</select>
<select id="se3">
  <option value="">请选择街道/区</option>
</select>

//首先 获取三个select节点
var s1 = document.getElementById('se1');
var s2 = document.getElementById('se2');
var s3 = document.getElementById('se3');

// 生成省 市城市的对象
let city = {
'请选择市/地区': ['请选择市/地区'],
'北京': ['请选择市/地区', '北京1', '北京2'],
'湖北': ['请选择市/地区', '武汉市'],
'湖南': ['请选择市/地区', '长沙1', '长沙2'],
'山东': ['请选择市/地区', '济南1', '济南2'],
'广东': ['请选择市/地区', '广州1', '广州2']
};
// 街道/区的对象
let area = {
	'请选择市/地区': ['请选择街道/区'],
	'北京1': ['请选择街道/区', '北京11', '北京111111'],
	'北京2': ['北京22', '北京222222'],
	'武汉市': ['武汉市111', '武汉市111'],
	'长沙1': ['长沙111',],
	'长沙2': ['长沙222', '武汉市111', '武汉市111'],
	'济南1': ['济南111'],
	'济南2': ['济南222'],
	'济南3': ['济南333'],
	'济南4': ['济南444'],
	'广州1': ['广州111'],
	'广州2': ['广州222'],
	'广州3': ['广州333'],
	'广州4': ['广州444']
};
for (per in city) {// 遍历对象 拿到省/市
    let c = document.createElement("option");
    c.innerHTML = per;  //将拿到的省/市 写入
    s1.appendChild(c);  // 添加进s1
}
// s1的内容发生变化时 触发的函数

s1.addEventListener('change',()=>{
 //s1 改变的时候同时也得带动s2 s3 的改变
	changeTown(city, s1, s2); 
	changeTown(area, s2, s3);  
})
s2.addEventListener('change',()=>{
 //s2 改变的时候带动s3 的改变
	changeTown(area, s2, s3);  
})
function changeTown(obj, node1, node2) {
  // 后面写的是+= 所以要一开始清除里面的文本 防止一直累加
	node2.innerHTML = '';
	// city 是对象 s1.value 改变的时候 他的值,city[s1.value].length 对象[属性名],length  可以拿到对应的数组长度
	for (let i = 0; i < obj[node1.value].length; i++) {
		let c = `<option>${obj[node1.value][i]}</option>`;   // 写入
		node2.innerHTML += c;
	}
}