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查看html源文件
Nov 08 Javascript
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
Javascript Web Worker使用过程解析
Mar 16 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
python list转矩阵的实例讲解
2018/08/04 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
家具商场的活动方案
2014/08/16 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2014年项目工作总结
2014/11/24 职场文书
小学教师读书笔记
2015/07/01 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫