这个是一个同事写的,我看着有用,就cv下来了.
程序功能主要逻辑是:
1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏
2.一级标签选中城市时,二级标签显示在页面,并列出响应市区
3.当一级标签选回默认状态时,二级标签隐藏
<!DOCTYPE HTML>
<html>
<head>
<title>城市二级联动列表</title>
<meta charset="utf-8" />
<style>
.hide{ display: none; }
</style> </head>
<body>
<select name="provs">
<option>—请选择—</option><!---->
<option>北京市</option><!---->
<option>天津市</option>
<option>河北省</option>
</select> <select name="cities" class="hide">
</select>
<script>
/*实现“省”和“市”的级联下拉列表*/
var cities=[
[{"name":'东城区',"value":101},
{"name":'西城区',"value":102},
{"name":'海淀区',"value":103},
{"name":'朝阳区',"value":104}],//0
[{"name":'河东区',"value":201},
{"name":'河西区',"value":202},
{"name":'南开区',"value":303}],
[{"name":'石家庄市',"value":301},
{"name":'廊坊市',"value":302},
{"name":'保定市',"value":303},
{"name":'唐山市',"value":304},
{"name":'秦皇岛市',"value":304}]
];
//查找两个select
var selProvs=
document.getElementsByName(
"provs"
)[0];
var selCts=
document.getElementsByName(
"cities"
)[0];
//为selProvs绑定选中项改变事件
selProvs.onchange=function(){
//获得当前select选中项的下标
var i=this.selectedIndex;
if(i>0){
//获得cities数组中i-1位置的子数组
var cts=cities[i-1];
//清空selCts的内容:
selCts.innerHTML="";
//创建文档片段
var frag=
document.createDocumentFragment();
//创建一个option，内容为-请选择-,追加到selCts下
var opt=
document.createElement("option");
opt.innerHTML="-请选择-";
frag.appendChild(opt);
//遍历cts中每个城市
for(var i=0;i<cts.length;i++){
//创建一个option，设置其内容为当前城市的name属性，设置其value为当前城市的value属性,追加到selCts中
var opt=
document.createElement("option");
//cts[i]:
// {"name":'东城区',"value":101}
opt.innerHTML=cts[i]["name"];
opt.value=cts[i]["value"];
frag.appendChild(opt);
}
//将frag整体追加到selCts中
selCts.appendChild(frag);
//清除selCts的class
selCts.className="";
}else
selCts.className="hide";
}
</script>
</body>
</html>