您的位置：首页 > 其它

实现“省”和“市”的二级联下拉列表

2016-03-24 14:46 288 查看

<!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 selCities(i){console.log(i);//找到name属性为cities的select元素,保存在变量sel中
var sel=document.getElementsByName("cities")[0];//如果i等于0，就设置sel的class属性为hide
if(i==0){
sel.className="hide";
}else{//否则
sel.innerHTML="";//  清除sel的内容
var arr=cities[i];// 获取cities数组中i位置的子数组，保存在变量arr中
var frag=document.createDocumentFragment();//  创建一个文档片段对象,保存在变量frag中
/* //创建一个空option元素,保存在opt中
var opt=document.createElement("option");
//设置opt的value属性为-1
opt.value=-1;
//设置opt的内容为
opt.innerHTML="-请选择-";
*/
var opt=new Option("-请选择-",0);
frag.appendChild(opt);//  将opt(子节点)追加到frag（文档片段）下
for(var i=0;i<arr.length;i++){// 遍历arr中每个城市对象
//  每遍历一个城市就创建一个空option元素，保存在变量opt中
/*
var opt=document.createElement("option");
//设置opt的value属性为当前城市的value属性值
opt.value=arr[i].value;
//设置opt的内容为当前城市的name属性值
opt.innerHTML=arr[i].name;
*/
var opt=new Option(arr[i].name,arr[i].value);
frag.appendChild(opt);//将opt追加到frag下
}
sel.appendChild(frag);// 将frag追加到sel下
sel.className="";//  清除sel的class属性
}
}
</script>
</head>
<body>
<select name="provs" onchange="selCities(this.selectedIndex)">
<option>—请选择—</option><!--0-->
<option>北京市</option><!--1-->
<option>天津市</option><!--2-->
<option>河北省</option><!--3-->
</select>
<select name="cities" class="hide">
</select>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航