JavaScript实现三级联动效果


Posted in Javascript onJuly 15, 2017

三级联动:就是平时网页上需要选择的省市县对应位置的下拉栏模块,当选择好省位置后市的下拉栏更新为已选省的,县类似。

JavaScript实现三级联动效果

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>三级联动</title>
</head>
<body>
<select id="sheng">
  <option value="">-请选择-</option><!--先创建三个下拉栏,分别对应 省 市 县-->
</select>

<select id="shi">
  <option value="">-请选择-</option>
</select>

<select id="xian">
  <option value="">-请选择-</option>
</select>
<script>
  var osheng=document.getElementById("sheng");
  var oshi=document.getElementById("shi");
  var oxian=document.getElementById("xian");

  var arr_sheng=["陕西省","云南省","四川省","山西省"];<!--创建一个一维数组,存入省的值-->

  var arr_shi=[<!--创建一个二维数组,最外层每一个元素对应省-->
    ["西安市","咸阳市","宝鸡市","渭南市"],<!--数组中的第一个元素内又定义一个数组存的市的值-->
    ["昆明市","大理市","丽江市","西双版纳市"],
    ["乐山市","成都市","大同市","高新市"],
    ["太原市","屏显市","乐宝市","李伟市"]
  ];

  var arr_xian=[<!--创建一个三维数组,最外层每一个元素(对应省)-->
      [<!--数组中定义四个数组(对应市)-->
        ["西安县1","西安县2"],["咸阳市1","咸阳市2"],["宝鸡市1","宝鸡市2"],["渭南市1","渭南市2"]
      ],<!--数组中定义两个元素(对应县)-->
      [
        ["昆明市1","昆明市2"],["大理市1","大理市2"],["丽江市1","丽江市2"],["西双版纳市1","西双版纳市2"]
      ],
      [
        ["乐山市1","乐山市2"],["成都市1","成都市2"],["大同市1","大同市2"],["高新市1","高新市2"]
      ],
      [
        ["太原市1","太原市2"],["屏显市1","屏显市2"],["乐宝市1","乐宝市2"],["李伟市1","李伟市2"]
      ]
  ];

  var quanju_arr;//创建一个全局对象,用于存储一个中间数组

  function input_arr(arr,event){//封装一个函数,用于向下拉栏中添加元素
    for(var i=0;i<arr.length;i++){//下拉栏内的元素来源于数组中的元素,遍历数组
      var option=new Option(arr[i],i);//创建Option对象(这个O要大写),存入值
      event.appendChild(option);//把option添加到event对象的末尾
    }
  }

  input_arr(arr_sheng,osheng);//调用,给省下拉栏添元素

  osheng.onchange= function () {//给下拉栏绑定事件(当下拉栏元素改变时执行)
    oshi.options.length=1;//当省下拉栏改变时,清空市的下拉栏内元素
    oxian.options.length=1;//当省下拉栏改变时,清空县的下拉栏内元素
    var index=this.value;//每一个option标签都有一个value值索引,获取索引,用于数组中元素的选择
    var arr_shi_next=arr_shi[index];//获取当前选择省的市元素并赋给一个数组
    quanju_arr=arr_xian[index];//获取当前选择省中市的县元素并赋给定义的中间数组
    input_arr(arr_shi_next,oshi);//调用,给市下拉栏添元素
  }

  oshi.onchange= function () {
    oxian.options.length=1;
    var index=this.value;
    var arr_xian_next=quanju_arr[index];
    input_arr(arr_xian_next,oxian);//调用,给县下拉栏添元素
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
BackBone及其实例探究_动力节点Java学院整理
Jul 14 #Javascript
backbone简介_动力节点Java学院整理
Jul 14 #Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 #Javascript
easyui简介_动力节点Java学院整理
Jul 14 #Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 #Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 #Javascript
简单实现js轮播图效果
Jul 14 #Javascript
You might like
很实用的一个完整email发送程序
2006/10/09 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
JavaScript静态的动态
2006/09/18 Javascript
js判断变量是否空值的代码
2008/10/26 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
python getpass实现密文实例详解
2019/09/24 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
群众路线查摆问题及整改措施
2014/10/10 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
利用Python实时获取steam特惠游戏数据
2022/06/25 Python