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 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
js实现select跳转功能代码
Oct 22 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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
改造一台复古桌面收音机
2021/03/02 无线电
php实现文件下载实例分享
2014/06/02 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
js实现搜索栏效果
2018/11/16 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
python实现海螺图片的方法示例
2019/05/12 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
100%羊绒:NakedCashmere
2020/08/26 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
大学毕业生的自我鉴定
2013/11/30 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
给校长的建议书100字
2014/05/16 职场文书
有关环保的标语
2014/06/13 职场文书
班级文化标语
2014/06/23 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
小学四年级学生评语
2014/12/26 职场文书
教师个人发展总结
2015/02/11 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server