您的位置：首页 > 其它
二级联动列表

2016-03-18 22:53 323 查看
<span style="font-size:18px;"><!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 loadCities(sel){
//获得选中项的下标,保存在变量i中
var i=sel.selectedIndex;
//从cities中获取i位置的子数组，保存在变量currCities
var currCities=cities[i];
//获取sel的下一个兄弟元素，保存在变量selCities中
var selCities=sel.nextElementSibling;
//如果currCities为空，就设置selCities的class为hide
if(currCities.length==0){selCities.className="hide"}
else{//否则
selCities.innerHTML="";//清空selCities的内容
//创建文档片段:frag
var frag=document.createDocumentFragment();
/*核心DOM
//创建一个option元素
var opt=document.createElement("option");
//设置option的内容为-请选择-
opt.innerHTML="-请选择-";
opt.value=-1;//设置option的value为-1
*/
var opt=new Option("-请选择-",-1);//HTML DOM
//将option临时追加到frag中
frag.appendChild(opt);
//遍历currCities中每个城市对象
for(var i=0;i<currCities.length;i++){
/*核心DOM
//创建option对象
var opt=document.createElement("option");
//设置option对象的内容为当前城市对象的name属性
opt.innerHTML=currCities[i].name;
//设置option对象的value为当前城市对象的value属性
opt.value=currCities[i].value;
*/
var opt=new Option(
currCities[i].name,currCities[i].value);
frag.appendChild(opt);//将option对象追加到frag
}//(遍历结束)
//将frag追加到selCities中
selCities.appendChild(frag);
//清空selCities的class，显示出来
selCities.className="";
}
}
</script>

</head>
<body>
<select name="provs" onchange="loadCities(this)">
<option>—请选择—</option><!--0-->
<option>北京市</option><!--1-->
<option>天津市</option>
<option>河北省</option>
</select>

<select name="cities" class="hide">

</select>
</body>
</html>
</span>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航