<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单联动</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<select name="provs" id="provs" onchange="selCitiesByProv(this)">
<option>-请选择-</option>
<option>北京市</option>
<option>天津市</option>
<option>河北省</option>
</select>
<select name="cities" class="hide"></select>
<script>
var cities=[[],
// 0号下表没有元素
[
{"name":"东城区","value":101},
{"name":"西城区","value":102},
{"name":"海淀区","value":103},
{"name":"朝阳区","value":104},
],
[
{"name":"河东区","value":201},
{"name":"河西区","value":202},
{"name":"南开区","value":203}
],
[
{"name":"石家庄市","value":301},
{"name":"廊坊市","value":302},
{"name":"保定市","value":303},
{"name":"唐山市","value":304},
{"name":"秦皇岛市","value":305}
],
];
function selCitiesByProv(selProvs) {
// 获得selProvs的选中项的下标，保存在变量i中
var i=selProvs.selectedIndex;
console.log(i);
// 获得cities数组中i位置的子数组，保存在变量cs中
var cs=cities[i];
console.log(cs);
// 获得name属性为cities的元素，保存在变量seCities中
var selCities=document.getElementsByName("cities")[0];
console.log(selCities);
// 如果cs的元素个数为0，就将selCities的class设为hide
if (cs.length==0){
selCities.className="hide";
}else{
selCities.className="";
selCities.innerHTML="";//创建文档片段对象，保存在frag中
var frag=document.createDocumentFragment();
// 创建option元素，保存在变量opt中
var opt=document.createElement("option");
console.log(opt);
// 设置opt的内容为"-请选择-"
opt.innerHTML="-请选择-";
// 设置opt的value为"-1"
opt.value="-1";
// 将opt追加到frag中
frag.appendChild(new Option("-请选择-"),-1);
// 遍历cs数组中的每个城市对象
for (var i=0;i<cs.length;i++){
// 创建一个option元素，保存在变量opt中
opt=document.createElement("option");
// 设置opt的内容为当前对象的name属性
opt.innerHTML=cs[i].name;
// 设置opt的value为当前对象的value属性
opt.value=cs[i].value;
frag.appendChild(
new Option(cs[i].name,cs[i].value)
);//将opt追加到frag下
}//遍历结束
selCities.appendChild(frag);//将frag追加到selCities
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号