JavaScript实现省市县三级级联特效


Posted in Javascript onMay 16, 2017

本文实例为大家分享了js省市县三级级联特效的实现代码,供大家参考,具体内容如下

主要思想

1.省改变,市改变,并初始化县
2.市改变,县改变

html代码

<select id="sheng">
 <option value="">--请选择--</option>
 <option value="0">北京市</option>
 <option value="1">河北省</option>
 <option value="2">山西省</option>
 <option value="3">内蒙古自治区</option>
</select>
<select id="shi">
 <option value="">--请选择--</option>
</select>
<select id="xian">
 <option value="">--请选择--</option>
</select>

主要步骤

1.获取元素对象

var sheng = document.getElementById('sheng');
var shi = document.getElementById('shi');
var xian = document.getElementById('xian');

2.定义市和县的数组

var city = [
   ['昌平区', '海淀区', '朝阳区', '东城区'],
   ['石家庄市', '保定市', '张家口市', '唐山市'],
   ['太原市', '大同市', '运城市', '临汾市'],
  ['呼和浩特市', '包头市', '鄂尔多斯市', '赤峰市']
 ];
  var xians = [
  [
    ['北七家','回龙观','霍营'],
    ['中关村','苏州街','西二旗'],
    ['朝阳1','朝阳2','朝阳3'],
    ['东城1','东城2','东城3'],
  ],
  [
   ['新华区','桥东区','桥西区'],
   ['高碑店','白沟','定兴'],
  ]
 ];

3.定义全局变量

var index = null;

4.实现省份改变,市跟着变化的效果

sheng.onchange = function() {
   xian.innerHTML = '<option value="">--请选择--</option>';// 初始化xian
   index = this.value; // 获取option的值
   var result = city[index];//根据index去city数组中获取对应的shi
   // 将获取的结果显示在select#shi中,循环result数组中的"每一个值",在值的两侧加上option标签
   var str = '<option value="">--请选择--</option>';
   for (var i = 0; i < result.length; i++) {
   // 将所有的拼接好的市再次拼接为一个整体
   str += '<option value="'+i+'">' + result[i] + '</option>';
   }
   shi.innerHTML = str;//将字符串写入到select#shi中
 }

5.实现市改变,获取县城的效果

shi.onchange = function(){
 var value = this.value; // 获取当前的value值  
 var county = xians[index][value]; // 根据市获取市对应的县
 var str = '<option value="">--请选择--</option>';
 for (var i = 0; i < county.length; i++) {
  str += '<option value="'+i+'">' + county[i] + '</option>';
 }
 xian.innerHTML = str;//将数据写入到select#xian中
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
原生js简单实现放大镜特效
May 16 #Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 #Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 #Javascript
Vue.js tab实现选项卡切换
May 16 #Javascript
Vue.js手风琴菜单组件开发实例
May 16 #Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 #Javascript
js自定义瀑布流布局插件
May 16 #Javascript
You might like
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
python中map()与zip()操作方法
2016/02/27 Python
python框架中flask知识点总结
2018/08/17 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python如何存储数据到json文件
2020/03/09 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
python能开发游戏吗
2020/06/11 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
女性时尚在线:IVRose
2019/02/23 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
团组织关系介绍信
2014/01/12 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
出国留学经济担保书
2014/04/01 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
离婚协议书格式
2015/01/26 职场文书
2015年班组长工作总结
2015/04/10 职场文书
大学团日活动总结书
2015/05/11 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
利用js实现简单开关灯代码
2021/11/23 Javascript