二级联动：

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. shell 中test命令

    test可用于测试表达式,支持测试的范围包括:字符串比较,算术比较,文件存在性.属性.类型等判断.例如,判断文件是否为空.文件是否存在.是否是目录.变量是否大于5.字符串是否等于"longs ...

  2. mybatis延迟加载详解

    http://www.cnblogs.com/selene/p/4631244.html http://blog.csdn.net/eson_15/article/details/51668523

  3. XamarinForm Effects 调用事件

    原文地址 在Xamarin.Forms控件中实现底层多点触控跟踪. 一个effect可以定义和调用一个事件,在底层本地视图中发出信号的变化.这篇文章演示如何实现底层多点触控跟踪,以及如何生成信号触摸活 ...

  4. .NET面试常考算法

    1.求质数    质数也成为素数,质数就是这个数除了1和他本身两个因数以外,没有其他因数的数,叫做质数,和他相反的是合数,    就是除了1和他本身两个因数以外,还友其他因数的数叫做合数. 1 nam ...

  5. 二十二、Hadoop学记笔记————Kafka 基础实战 ：消费者和生产者实例

    kafka的客户端也支持其他语言,这里主要介绍python和java的实现,这两门语言比较主流和热门 图中有四个分区,每个图形对应一个consumer,任意一对一即可 获取topic的分区数,每个分区 ...

  6. 基于Go的websocket消息服务

    3个月没写PHP了,这是我的第一个中小型go的websocket微服务.那么问题来了,github上那么多轮子,我为什么要自己造轮子呢? Why 造轮子? 因为这样不仅能锻炼自己的技术能力,而且能帮助 ...

  7. 你不知道的JavaScript--Item4 基本类型和基本包装类型（引用类型）

    1.基本类型和引用类型 基本的数据类型有5个:undefined,boolean,number,string,null typeof null; //"object" typeof ...

  8. 底层网络技术以及IP编址

    网络信息的传输在最底层总是依托于物理介质来进行传输的,这里的传输介质分为两种: 有线介质  导线管(导向媒体).例如:双绞线.同轴电缆.光纤等 无线介质  电磁波(非导向媒体):利用各种波长的电磁波充 ...

  9. 创建本地数据库mySQL并连接JDBC

    转自: http://blog.csdn.net/wei_chong_chong/article/details/44830491 如何创建本地数据库MySQL并连接JDBC 转载 2015年04月0 ...

  10. NIO（一）——缓冲区Buffer

                                        NIO(一)--Buffer NIO简介 NIO即New IO,是用来代替标准IO的,提供了与标准IO完全不同传输方式. 核心: ...