JavaScript实现省市二级联动
Posted 给颗糖就笑的孩纸
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现省市二级联动相关的知识，希望对你有一定的参考价值。
JavaScript实现省市二级联动
展示一下效果？
当我鼠标点击前面的省那一栏的时候后面市那一栏会出现相对应的下辖市
实现思路
1. 添加相对应的select容器
2. 然后添加数据
3. 将相应的数据赋值给对应的option控件
方法的讲解
Function（）函数 onchange();改变事件
笔者在这里写了一个关于河南与河北的简单联动
省市联动
<body>
<select id=”province”></select>省
<select id=”city”></select>市 //建立select容器
//建立javascript样式
<script type = ”text/javascript”>
Var data = {
“河南”:[“郑州”,“开封”，“许昌”],
“河北”:[“石家庄”,”邯郸”,”烟台”]
}
//创建json数据源
Var Pro = document.getElementById(“province”); //创建省容器对象
For(var key in data) {
Var ProOption = document.createElemenent(“option”);//创建option控件
ProOption.innerhtml = key;//为控件赋值
Pro.appendChild(ProOption);//将控件添加到相对应的容器中
}
Var City = document.getElementById(“province”); //创建市容器对象
Pro.onchange=function（）{/--创建事件--/
Var key = this.value; //创建key对象
Var citArr = data[key];//创建城市数组
City.innerHTML = “”;//为防止重复添加每一次执行清空容器
For(var i=0;i<citArr.length;i++){/--遍历数组--/
Var citName = citArr[i];//取出城市名称
Var CitOption = document.createElemenent(“option”);//创建城市控件
CitOption.innerHTML = citName;//为控件赋值
City.appendChild(CitOption);//将空间添加容器
}
}
Pro.onchange();//为让容器有默认值提前调用方法一次
</body>
写的不好请多指教：有疑问可留言
学习不易，请读者多多分享。传播知识正能量
</body>
以上是关于JavaScript实现省市二级联动的主要内容，如果未能解决你的问题，请参考以下文章