<script> data={'河北':{'廊坊':['廊1','廊2'],'石家庄':['石1']},'湖南':{'长沙':['长1'],'株洲':['株1']},"广东":{'广州':['广1'],'深圳':['深1']}} var ele_pro = document.getElementsByClassName('provinces')[0]; var ele_city = document.getElementsByClassName('citys')[0]; var ele_town = document.getElementsByClassName('town')[0];
for (var i in data){ // 创建省份标签 var ele_pro_option=document.createElement('option'); // 给标签增加html内容 ele_pro_option.innerHTML=i; // 将标签附加到select标签中 ele_pro.appendChild(ele_pro_option);
}
// 选择省份之后,获取城市的列表 var ele_Citys;
// 选择省份级联城市 ele_pro.onchange = function () { // 此处的this得出的是select的省份options // console.log(this); // this 选中省份的select标签 var p=this.options[this.selectedIndex].innerHTML; // 得出省份 ele_Citys=data[p]; // console.log(ele_Citys) // 打印出城市信息 // console.log(ele_Citys); // 当省份重新点击的时候,将option直接设制成1,重新选择 ele_city.options.length=1; if (ele_city.options.length == 1){ ele_town.options.length=1
}
// 循环城市列表 for (var i in ele_Citys){ var ele_city_option = document.createElement('option');
ele_city_option.innerHTML=i; ele_city.appendChild(ele_city_option);
}
}
//选择城市级联镇或区 ele_city.onchange = function () { // 查看城市的select标签 // console.log(this) var ele_town_chiose = this.options[this.selectedIndex].innerHTML; console.log('ele_city_chiose: '+ele_town_chiose);
var town_chiose=ele_Citys[ele_town_chiose]; console.log(town_chiose) ele_town.options.length=1 for (var i in town_chiose){ console.log(town_chiose[i]) var ele_town_create=document.createElement('option')
ele_town_create.innerHTML=town_chiose[i]; ele_town.appendChild(ele_town_create)
}
}
发表于 2018-3-15 11:25
|
发表于 2018-3-15 13:14
