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实现跳转菜单的具体方法
Jul 05 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
discuz安全提问算法
2007/06/06 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
php session的锁和并发
2016/01/22 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python标准库与第三方库详解
2014/07/22 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
医院总经理职责
2013/12/26 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server
Java中的继承、多态以及封装
2022/04/11 Java/Android
mysql数据库如何转移到oracle
2022/12/24 MySQL