二级联动，三级联动，初学者，纯javascript，不含jQuery

时间：2023-01-08 13:01:47

二级联动：

html代码：

 <body>

         <select id="province" onchange="getCity(this.options.selectedIndex)">

             <option>请选择</option>

             <option>广东</option>

             <option>广西</option>

         </select>省&nbsp;

         <select id="city">

             <option>请选择</option>

         </select>市&nbsp;

 </body>

js代码：

 var citys=[

     ["广州","佛山","深圳"],

  　　["柳州","桂林"]

 ];

 function getCity(index){

      var city=document.getElementById('city');

      var showCity=citys[index-1];

      city.length=1;

      for(var i=0;i<showCity.length;i++){

           city.options[i+1]=new Option(showCity[i]);

      }

 }

三级联动：

html代码：

 <body>

         <select id="province" onchange="getCity()">

             <option>请选择</option>

             <option>广东</option>

             <option>广西</option>

         </select>省&nbsp;

         <select id="city" onchange="getArea()">

             <option>请选择</option>

         </select>市&nbsp;

         <select id="area">

             <option>请选择</option>

         </select>区

     </body>

js代码：

 var city = [

                 ["广州", "朝阳", "潮州", "汕头"],

                 ["柳州", "桂林"]

             ];

             var areaa = [

                 [

                     ["花都", "越秀", "荔湾", "天河", "海珠", "增城", "从化"],

                     ["双塔", "龙城"],

                     ["湘桥", "潮安"],

                     ["龙湖", "濠江", "朝南", "澄海"]

                 ],

                 [

                     ["柳江", "柳南", "柳北"],

                     ["叠彩", "秀峰", "七星", "雁山", "临桂"]

                 ]

             ];

             function getCity() {

                 var prov = document.getElementById("province");

                 var ci = document.getElementById("city");

                 var ar = document.getElementById('area');

                 var provinceCity = city[prov.selectedIndex - 1];

                 ci.length = 1; //为了处理数组切换时数据错乱

                 if(prov.selectedIndex != 0) {

                     for(var i = 0; i < provinceCity.length; i++) {

                         ci[i + 1] = new Option(provinceCity[i]);

                         //以下写法也可以

                         //ci.options[i+1]=new Option(provinceCity[i]);

                     }

                 }

                 ar.length = 1;

             }

             function getArea() {

                 var prov = document.getElementById("province");

                 var ar = document.getElementById('area');

                 var ci = document.getElementById("city");

                 var provinceCityArea = areaa[prov.selectedIndex - 1][ci.selectedIndex - 1];

                 ar.length = 1; //为了处理数组切换时数据错乱

                 if(ci.selectedIndex != 0) {

                     for(var i = 0; i < provinceCityArea.length; i++) {

                         ar[i + 1] = new Option(provinceCityArea[i]);

                     }

                 }

             }

二级联动，三级联动，初学者，纯javascript，不含jQuery的更多相关文章

  1. 移动端纯原生JS不依赖ajax后台服务器实现省市县三级联动

    最近好多天没有更新文章,是因为公司的项目忙的不行.今天有点时间,就突然想起在移动端项目中遇到三级联动的问题,网上查了很多资料,都是依赖各种插件,或者晦涩难于理解.于是,自己决定写一个出来. 当然,没有 ...

  2. 时间操作（JavaScript版）—年月日三级联动（默认显示系统时间）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35263317         这个功能 ...

  3. 【转】纯JS省市区三级联动（行政区划代码更新至2015-9-30）

    本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...

  4. JavaScript 三级联动

    附件连接下载地址:http://files.cnblogs.com/files/CaktyRiven/js.zip <!DOCTYPE html> <html lang=" ...

  5. 转&colon; javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  6. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  7. 纯javascript联动的例子

    有人想要学习下纯javascript联动的一些技巧,我这里就以日期的联动为例,附上一些代码至于复杂的省市区联动,不建议用纯javascript的,而是用ajax的方式,该不在此讨论范围内,想要了解aj ...

  8. 原生JavaScript的省市县三级联动

    三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> &lt ...

  9. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

随机推荐

  1. Git CMD - log&colon; Show commit logs

    命令参数 git log [<options>] [<revision range>] [[\--] <path>…​] 命令参数 --since=<date ...

  2. js深入研究之克隆，属性，数组，对象，函数

    代码 <script type="text/javascript"> /* 克隆原型得到对象 */ function clone(object) { function ...

  3. iOS方法类：CGAffineTransform的使用

    CoreGraphics框架中的CGAffineTransform类可用于设定UIView的transform属性,控制视图的缩放.旋转和平移操作: 另称放射变换矩阵,可参照线性代数的矩阵实现方式0. ...

  4. java获取机器IP地址常用方法

    private String getHostIP(){ Enumeration<NetworkInterface> allNetInterfaces = null; String resu ...

  5. JavaScript我学之七数组

    本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘. 数组是“多态数组" ,啥都可以放 //JavaScript中的多态数组 var arr = ["one", 2 ...

  6. pascalcontext-fcn全卷积网络结构理解

    一.说明 fcn的开源代码:https://github.com/shelhamer/fcn.berkeleyvision.org 论文地址:fully convolutional networks ...

  7. python：数据类型

    一.数据类型 1.数字int型 主要进行计算 bit_length() 当十进制用二进制表示时,最少使用的位数 a = 13 b = a.bit_length() print (b) 2.布尔值boo ...

  8. Vue 动态组件、动画、插件

    1 动态组件 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is=”组件名 ...

  9. C&num; IOCP服务器项目（学习）

    无论什么平台,编写支持高并发性的网络服务器,瓶颈往往出在I/O上,目前最高效的是采用Asynchronous I/O模型,Linux平台提供了epoll,Windows平台提供了I/O Complet ...

  10. win10系统安装Oracle11报错不满足最低要求

    以下问题是,在安装Oracle过程中遇到的问题以及自己的解决方法: 问题一:下载好两个Oracle的安装压缩包文件,同时解压后,启动setup.exe,报错:[INS-13001]环境不满足最低要求. ...

相关文章