您的位置：首页 > Web前端 > JavaScript

javascript省市二级联动效果

2016-01-06 14:58 591 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框二级联动</title>
</head>
<body>
<p>省级：<select id="provinces"></select></p>
<p>市级：<select id="citys"></select></p>
<script type="text/javascript">
window.onload=function(){
/* 联动效果，地区数据字典
* code代表被绑定的二级菜单标示符
* */
var linkDatas={
provinces: [
{
"code":"0",
"name":"请选择"
},
{
"code":"1",
"name":"北京"
},
{
"code":"2",
"name":"天津"
},
{
"code":"3",
"name":"河北"
},
{
"code":"4",
"name":"湖北"
},
{
"code":"5",
"name":"广东"
}
],
citys: {
0:[
"请选择"
],
1:[
"朝阳区",
"海淀区",
"东城区",
"西城区",
"房山区",
"其他"
],
2:[
"天津"
],
3:[
"沧州",
"石家庄",
"秦皇岛",
"其他"
],
4:[
"武汉市",
"宜昌市",
"襄樊市",
"其他"
],
5:[
"广州市",
"深圳市",
"汕头市",
"佛山市",
"海珠市",
"其他"
],
6:[
"其他"
]
}
};
function linkage(parents,childs){ // parents:省级  childs:市级
var _linkDatas=linkDatas,  //数据字典
_parents=_linkDatas.provinces,//省级数据
_childs=_linkDatas.citys,  //市级数据
_initCity=_childs[0];   //市级 数组第一个
_p=[];               //存储每次变化后的数据数组
/*初始化数据*/
for(var i in _parents){ //循环读取省级的数据
_p.push({              //将省的数据放入数组
"text": _parents[i].name, //省的name属性
"value": _parents[i].code  //省的code属性
});
}
addOptions(parents,_p);//给省级的select添加option元素
addOptions(childs,[{"value": _initCity,"text": _initCity}]);//给市级的select添加option元素(第一次运行添加一个默认的值)
parents.onchange=function(){ //联动事件绑定及具体业务处理
var __childs=_childs[this.value],//寻找与省关联的市级数据
_childsLen=__childs.length,
l=0,
_p=[]; //更换省级的时候清空保存市级数据的数组
childs.innerHTML=""; //更换省级的时候清空市级select的内容
for(;l<_childsLen;l++){
_p.push({
"value": __childs[l],
"text": __childs[l]
});
}
addOptions(childs,_p);
}
}
function addOptions(target,optons){ //动态添加option到下拉框
var _option=null,               //target：select元素
ol=optons.length,       //optons：要追加的options元素
i= 0,
_v="",
_t="";
for(;i<ol;i++){
_v=optons[i].value;
_t=optons[i].text;
_option=document.createElement("option");
_option.value=_v;
_option.text=_t;
target.options.add(_option); //add()：给select添加option的html dom方法
}
}
linkage(
document.getElementById("provinces"),
document.getElementById("citys")
);
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航