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控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
javascript中new关键字详解
Dec 14 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
微信小程序webSocket的使用方法
Feb 20 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/03 冲泡冲煮
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
js取得url地址参数实例
2013/02/22 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python实现决策树分类(2)
2018/08/30 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
django 信号调度机制详解
2019/07/19 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
大四学年自我鉴定
2013/11/13 职场文书
房地产融资计划书
2014/01/10 职场文书
大学生工作自荐书
2014/06/16 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS