JavaScript实现省市二级联动
2018-06-24 01:28:17来源：未知 阅读 ()
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>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：es6学习笔记
- javascript面向对象入门基础详细介绍 2020-03-29
- js防止表单重复提交实现代码 2020-03-29
- 基于JQuery的多标签实现代码 2020-03-29
- js实现翻页后保持checkbox选中状态的实现方法 2020-03-25
- JavaScript函数表达式详解及实例 2020-03-25
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
