<!DOCTYPE HTML>
<html>
<head>
<title>二级联动列表</title>
<meta charset="utf-8" />
<style>
.hide{ display: none; }
</style>
</head>
<body>
<select name="provs">
<option>—请选择—</option><!--0-->
<option>北京市</option><!--1-->
<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}],
[{"name":'河东区',"value":201},
{"name":'河西区',"value":202},
{"name":'南开区',"value":203}],
[{"name":'石家庄市',"value":301},
{"name":'廊坊市',"value":302},
{"name":'保定市',"value":303},
{"name":'唐山市',"value":304},
{"name":'秦皇岛市',"value":305}]
];
//1.获取触发事件的元素
var selProvs=document.getElementsByName("provs")[0];
//2.绑定触发事件
selProvs.onchange=function(){
var selProvs=this;
var i=selProvs.selectedIndex;//获得当前选中项
var arr=cities[i-1];
//console.log(arr);
if(i>0){
var selCts=document.getElementsByName("cities")[0];
//创建文档片段对象
var frag=document.createDocumentFragment();
//3.修改元素
//创建一个(请选择)的元素
var opt=new Option("--请选择--");
frag.appendChild(opt);
for (var c of arr){
console.log(c);
//创建option元素添加,value和name
var option=new Option(c.name,c.value);
//将option元素添加到文档片段对象中
frag.appendChild(option);
}
//将文档片段一次性添加到DOM树上
//每次追加元素的时候清空内容
selCts.innerHTML="";
selCts.appendChild(frag);
//将class属性去掉(去掉class样式中的dispan=none);
selCts.className="";
}else{
selCts.className="hide";
}
}
</script>
</body>
</html>
效果:
