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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 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
Protoss兵种对照表
2020/03/14 星际争霸
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
推荐dojo学习笔记
2007/03/24 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
Python内置函数OCT详解
2016/11/09 Python
python基础教程之匿名函数lambda
2017/01/17 Python
简单易懂的python环境安装教程
2017/07/13 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Python高级property属性用法实例分析
2019/11/19 Python
python读取与处理netcdf数据方式
2020/02/14 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
专业毕业生个性的自我评价
2013/10/03 职场文书
高二政治教学反思
2014/02/01 职场文书
五心教育心得体会
2014/09/04 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
我的长征观后感
2015/06/09 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers