二级联动：

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. 转: 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> < ...

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

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

随机推荐

  1. C#之Redis为所欲为

    一 Redis是一种支持多种数据结构的键值对数据库 1.1Redis下载地址 :https://github.com/MicrosoftArchive/Redis 建议下载 .msi结尾的应用程序进行 ...

  2. Java动态代理（一）

    好久没有动笔了,最近想巩固一下自己的基础知识,最近听到一同事问为什么JDK动态代理不能代理类,一听感觉懵逼呀!自己好像也不能很好的描述出来,所以想用2篇文章来复习一下动态代理知识: 一.什么是静态代理 ...

  3. Python_字符串查找与分隔

    #字符串常用方法 s='apple,peach,banana,peach,pear' #返回第一次出现的位置 print(s.find('peach')) #指定位置开始查找 print(s.find ...

  4. 在线引用js资源积累

    [jQuery]https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js[Vue]https://cdnjs.cloudfla ...

  5. Lucene入门简介

    一  Lucene产生的背景 数据库中的搜索很容易实现,通常都是使用sql语句进行查询,而且能很快的得到查询结果. 为什么数据库搜索很容易? 因为数据库中的数据存储是有规律的,有行有列而且数据格式.数 ...

  6. PAT1042:Shuffling Machine

    1042. Shuffling Machine (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Shu ...

  7. 在Mac OS X中配置Apache ＋ PHP ＋ MySQL 很详细

    这是一篇超级详细的配置mac os下面php+mysql+apache的文章.非常详细我的大部分配置就是参考上面的内容的,比如,PHP不能连接数据库,就是改一下默认的php.ini中pdo_mysql ...

  8. posix,perl正则表达式区别

    1.正则表达式(Regular Expression,缩写为regexp,regex或regxp),又称正规表达式.正规表示式或常规表达式或正规化表示法或正规表示法,是指一个用来描述或者匹配一系列符合 ...

  9. call()，apply()方法解析（一）

    1.call()和apply()的作用是改变this指向,区别是传参列表不同(前者连续参数,后者为参数数组) 2.方法定义: function.apply(thisObj[, argArray]) f ...

  10. 使用box-shadow进行画图(性能优化终结者)

    最近突然想做一些好玩的东西,找来找去,想到了之前曾经在网上看到过有人用box-shadow画了一副蒙娜丽莎出来感觉这个挺有意思,正好趁着周末,自己也搞一波 前言 在线地址: 优化前的版本优化后的版本源 ...