<!DOCTYPE HTML>
<html>
<head>
<title>二级联动列表</title>
<meta charset="utf-8" />
<style>
.hide{ display: none; }
</style>
<script>
/*实现“省”和“市”的级联下拉列表*/
var cities=[
[], /*0号下标没有元素*/
[{"name":'东城区',"value":101},
{"name":'西城区',"value":102},
{"name":'海淀区',"value":103},
{"name":'朝阳区',"value":104}],
[{"name":'河东区',"value":201},
{"name":'河西区',"value":202},
{"name":'南开区',"value":303}],
[{"name":'石家庄市',"value":301},
{"name":'廊坊市',"value":302},
{"name":'保定市',"value":303},
{"name":'唐山市',"value":304},
{"name":'秦皇岛市',"value":304}]
];
function getCities(selProvs){
var index=selProvs.selectedIndex;//首先要拿到第几项被选中
//找到name属性为cities的select元素，保存在变量selCities中
var selCities=document.getElementsByName("cities")[0];
//getElementsBy...就算只找到一个返回的也是数组，所以一定要加下标！！！
//如果i等于0
if(index==0){
// 设置selCities的className为hide
selCities.className="hide";
}else{//否则
// 清除selCities的calssName属性
selCities.className="";
// 清除selCities下的所有内容
selCities.innerHTML="";
/*
// 先创建文档片段，保存在frag中
var frag=document.createDocumentFragment();
// 创建一个空option元素保存在变量opt中
var opt=document.createElement("option");
// 设置opt的内容为请选择
opt.innerHTML="-请选择-";
// 将opt追加到frag中
frag.appendChild(opt);
*/
//可以用下面一句html dom 代替
selCities.add(new Option("-请选择-"));//大写！！！
// 遍历cities数组中index位置的子数组中每个城市对象
for(var i=0;i<cities[index].length;i++){
// 每遍历一个城市，要创建一个空option元素保存在变量opt中
/*
opt=document.createElement("option");
// 设置opt的内容为当前城市的name属性值
opt.innerHTML=cities[index][i].name;
// 设置opt的value属性为当前城市的value属性
opt.value=cities[index][i].value;
// 将opt追加到frag中
frag.appendChild(opt);
}
// (遍历结束)将frag整体追加到selCities中
*/
//用这句代替
selCities.add(
new Option(cities[index][i].name
,cities[index][i].value));
}
//selCities.appendChild(frag);简便之后就不需要这个了
}
}
</script>
</head>
<body>
<select name="provs" onchange="getCities(this)">
<option>—请选择—</option>
<option>北京市</option>
<option>天津市</option>
<option>河北省</option>
</select>
<select name="cities" class="hide"></select>
</body>
</html>