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 相关文章推荐
图片完美缩放
Sep 07 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
轻松搞定js表单验证
Oct 13 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
Javascript 解构赋值详情
Nov 17 Javascript
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
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
php跨域调用json的例子
2013/11/13 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
JQuery基础语法小结
2015/02/27 Javascript
JSONP之我见
2015/03/24 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
java必学必会之static关键字
2015/12/03 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
Node对CommonJS的模块规范
2019/11/06 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Django自定义用户登录认证示例代码
2019/06/30 Python
python flask中动态URL规则详解
2019/11/22 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
财务部副经理岗位职责
2014/03/14 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
2016春节慰问信范文
2015/03/25 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
MySQL视图概念以及相关应用
2022/04/19 MySQL
Win11软件图标固定到任务栏
2022/04/19 数码科技