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 相关文章推荐
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
javascript中undefined的本质解析
Jul 31 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP 采集程序原理分析篇
2010/03/05 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
javascript高亮效果的二种实现方法
2008/09/14 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python import用法以及与from...import的区别
2015/05/28 Python
python中正则的使用指南
2016/12/04 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
python中的django是做什么的
2020/07/31 Python
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
离婚财产分割协议书
2015/08/11 职场文书
Spring Boot实现文件上传下载
2022/08/14 Java/Android