效果如下（原生js）：
------
HTML：
<body>
请选择省份
<select name="" id="province">
<option value="请选择省份">请选择省份</option>
</select>
请选择市
<select name="" id="cities">
<option value="请选择市">请选择市</option>
</select>
请选择区
<select name="" id="shiqu">
<option value="请选择市">请选择区</option>
</select>
</body>
JS：
var province = new Array();
var cities = new Array();
province['河北省'] = ['石家庄', '保定', '邯郸', '邢台', '张家口'];
province['北京市'] = ['东城', '西城', '宣武', '海淀', '崇文'];
//console.log(province['河北省'][0]);
cities['石家庄'] = ['裕华区','东区','西区','南区'];
cities['保定'] = ['雄安新区','东区','西区','南区'];
//console.log(cities['石家庄'][1]);
var oProvince = document.querySelector('#province');
var oCities = document.getElementById('cities');
var shiqu=document.getElementById('shiqu');
//console.log(typeof province['河北省']);
for (var k in province) {
// console.log(k);
// console.log(province[k]);
oProvince.add(new Option(k, k), null);
}
oProvince.onchange = function() {
//清空市级下拉菜单
oCities.length = 1;
//点了河北省控制台会获得河北省 点了北京市会获得北京市
//console.log(oProvince.value);
var oSelect = oProvince.value; //获取选中的省份值
for (var k in province[oSelect]) {
//console.log(province[oSelect][k]);
oCities.add(new Option(province[oSelect][k], province[oSelect][k]), null)
}
}
for(var k in cities){
// console.log(k);
// console.log(cities[k]);
oCities.add(new Option(k,k),null);
}
oCities.onchange=function(){
shiqu.length = 1;
//console.log(111);
//console.log(oCities.value);
var oSelects = oCities.value;
for (var k in cities[oSelects]) {
console.log(cities[oSelects][k]);
shiqu.add(new Option(cities[oSelects][k], cities[oSelects][k]), null)
}
}
2334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
