JS三级联动代码格式实例详解


Posted in Javascript onDecember 30, 2019

这篇文章主要介绍了JS三级联动代码格式实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

实现js多级联动的代码格式

<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
</head>
<body>
  省份<select id="pro" onchange="getcity()"> <!--创造三个下拉选项栏-->
     <option>选择省份</option>
  </select>
  城市<select id="city" onchange="getarea()">
    <option>选择城市</option>
  </select>
  区<select id="area">
    <option>选择区</option>
  </select>
</body>

</html>
<script type="text/javascript">
  var sheng = ["湖北省", "湖南省", "广东省"];
  var city = [["武汉市", "宜昌市", "咸宁市"], ["长沙市", "常德市", "邵阳市"], ["广州市", "深圳市", "惠州市"]]
  var ar = [[["武昌区", "洪山区"], ["夷陵区"], ["咸安区"]], [["芙蓉区"], ["鼎城区"], ["双清区"]], [["荔湾区"], ["福田区"], ["惠阳区"]]]
  window.onload = start;
  var s = document.getElementById("pro"); //设置初始的省份选项
  function start() {

    for (var i = 0; i < sheng.length; i++) {
      var op = document.createElement("option");
      op.innerHTML = sheng[i];
      s.appendChild(op);   //添加几个可选择的省份到第一个选项下拉栏
    }
  }
  var c = document.getElementById("city")
  function getcity() {
    c.length = 1;
    var sw = s.selectedIndex;//找到省份位置,从而好使后面的城市与省份对应
    var citys = city[sw - 1];
    for (var j = 0; j < citys.length; j++) {
      var op1 = document.createElement("option");
      op1.innerHTML = citys[j];
      c.appendChild(op1);
    }
  }
  var a = document.getElementById("area")
  function getarea() {
    a.length = 1;
    var sw = s.selectedIndex;//省份位置,与上一步中的sw一样
    var cw = c.selectedIndex;//城市位置
    var citys = ar[sw - 1];//先把三维数组中的区域找出来,确定是哪个省里的几个区
    var ars = citys[cw - 1];//再w位置,把对应的区对应给相应的城市
    for (var k = 0; k < ars.length; k++) {
      var op2 = document.createElement("option");
      op2.innerHTML = ars[k];
      a.appendChild(op2);
    }
  }
</script>

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

Javascript 相关文章推荐
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
深入探讨前端框架react
Dec 09 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
JavaScript监听触摸事件代码实例
Dec 30 #Javascript
微信公众号服务器验证Token步骤图解
Dec 30 #Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 #Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 #Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 #Javascript
JavaScript switch语句使用方法简介
Dec 30 #Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 #Javascript
You might like
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python中自定义函数的教程
2015/04/27 Python
python 远程统计文件代码分享
2015/05/14 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
Python基于Faker假数据构造库
2020/11/30 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
心得体会怎么写
2013/12/30 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
Oracle中update和select 关联操作
2022/01/18 Oracle
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL