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 相关文章推荐
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 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实现四舍五入的方法小结
2015/03/03 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
js中的闭包学习心得
2018/02/06 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
基本款天堂:Everlane
2017/05/13 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
2014自荐信的写作技巧
2014/01/28 职场文书
丑小鸭教学反思
2014/02/03 职场文书
高三霸气励志标语
2014/06/24 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
限期整改通知书
2015/04/22 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
创业计划书介绍
2019/04/24 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
详解Redis复制原理
2021/06/04 Redis