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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
vue路由分文件拆分管理详解
Aug 13 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 和 XML: 使用expat函数(二)
2006/10/09 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
Python对列表中的各项进行关联详解
2017/08/15 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
python如何生成网页验证码
2018/07/28 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
英语自荐信范文
2013/12/11 职场文书
贷款担保申请书
2014/05/20 职场文书
保护水资源的标语
2014/06/17 职场文书
安全先进班组材料
2014/12/26 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
php中pcntl_fork详解
2021/04/01 PHP
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
Golang并发工具Singleflight
2022/05/06 Golang