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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
node.js中express-session配置项详解
May 31 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
原生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下载excel无法打开的解决方法
2013/12/24 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
详解jquery和vue对比
2019/04/16 jQuery
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
python处理excel绘制雷达图
2019/10/18 Python
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
nohup的用法
2012/11/26 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
建筑专业自我鉴定
2013/10/22 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis