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 相关文章推荐
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
原生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用户指南-cookies部分
2006/10/09 PHP
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
python写入中英文字符串到文件的方法
2015/05/06 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
python实现文件的备份流程详解
2019/06/18 Python
django实现类似触发器的功能
2019/11/15 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
单位领导证婚词
2014/01/14 职场文书
运动会拉拉队口号
2014/06/09 职场文书
企业整改报告范文
2014/11/08 职场文书
感恩父母主题班会
2015/08/12 职场文书
八年级数学教学反思
2016/02/17 职场文书