二级联动：

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. String的substring（）用于截取字符串

    substring() 用于返回一个字符串的子字符串,即截取字符串功能. substring()常用的重载方法如下: substring(int beginIndex,int endIndex) 意思 ...

  2. BufferedInputStream与BufferedOutputStream用法简介

    BufferedInputStream是带缓冲区的输入流,默认缓冲区大小是8M,能够减少访问磁盘的次数,提高文件读取性能:BufferedOutputStream是带缓冲区的输出流,能够提高文件的写入 ...

  3. Swift-函数学习

    函数:函数是独立的代码块,执行特定的任务. Swift 的统一函数语法足够灵活,能表达没有参数名称的简单的 C 型函数的任何东西,本地和外部复杂 Objective-C-style 方法参数名称为每个 ...

  4. windows10系统终极净化方法

    去年购入一台华硕FL8000U,性能很是不错,但是硬件只能兼容win10,不支持win7(linux倒是可以,但是始终用不顺手),win10里面杂七杂八的确实很多,本人重度强迫症+洁癖+极简主义,所以 ...

  5. ES7 Async/Await 陷阱

    什么是Async/Await ES6新增了Promise函数用于简化项目代码流程.然而在使用promise时,我们仍然要使用callback,并且并不知道程序要干什么,例如: function doS ...

  6. Javascript书籍推荐----(步步为赢)

    在此分享一些高清javascript书籍,因为我也没有全部看完,所以在这只是推荐,不同的书适合不同的人,所有的书在网上均有电子书,若找不到,请在博客留言,我有大部分书籍的电子稿.希望有更多的好书分享出 ...

  7. C/C++中结构体struct 的使用

    结构(struct)      结构是由基本数据类型构成的.并用一个标识符来命名的各种变量的组合.  结构中可以使用不同的数据类型.      1. 结构说明和结构变量定义      在Turbo C ...

  8. MyEclipse代码提示设置

    (一)普通代码提示 1. 打开MyEclipse ,然后"window"→"Preferences" 2. 选择"java",展开,&quo ...

  9. 连接Redis后执行命令错误 MISCONF Redis is configured to save RDB snapshots

    今天在redis中执行setrange name 1 chun 命令时报了如下错误提示: (error) MISCONF Redis is configured to save RDB snapsho ...

  10. python中RabbitMQ的使用（安装和简单教程）

    1,简介 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现的产品,RabbitMQ是一个消息代理,从"生产者"接收消息 ...