二级联动：

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. github page 配置hexo 博客 的常见错误

    缘起 最近看到好多的公众号作者推荐大家搭建自己的博客,自己手痒也搭建了一个个人博客lumang,具体过程就是一开始上网搜索一番教程,按照教程开始搭建,由于是windows的环境,同时教程也有很多的老旧 ...

  2. bestcoder round 74 div2

    随便看了一场以前的bestcoder,然后顺便写了一下,都不码的样子 有中文题面,这里就不写题目大意了 T1. 刚开始想复杂了,T1可能是4道题里面想的最久的 我们大概弄一下就可以发现,如果a[i]& ...

  3. C语言 > 数组和指针

    C语言 数组和指针 const: 关于指针和const需要注意一些规则.首先,把const数据或非const数据的地址初始化为指向const的指针或为其赋值是合法的. 然而,只能把非const数据的地 ...

  4. 使用jmeter 进行接口的性能测试

    1.启动jmeter:在bin下以管理员身份运行jmeter.bat,启动jmeter 2. 创建测试计划: 默认启动jmeter时会加载一个测试技术模板,保存测试计划:修改名称为Apitest,点击 ...

  5. asp.net mvc 使用 Autocomplete 实现类似百度，谷歌动态搜索条提示框。

    Autocomplete是一个Jquery的控件,用法比较简单. 大家先看下效果: 当文本框中输入内容,自动检索数据库给出下拉框进行提示功能. 需要用此控件大家先到它的官方网站进行下载最新版本: ht ...

  6. 在VirtualBox中安装BlackArch Linux

    作者:荒原之梦 安装前的准备 下载系统映像:BlackArch Linux官网下载页面 在本文中我使用的是BlackArch Linux的Live ISO,这样可以减少安装时下载系统的时间.Black ...

  7. echarts 专题

    todo:缩放 5 分钟上手 ECharts 获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的 ...

  8. Autopep8的使用

    什么是Autopep8 在python开发中, 大家都知道,python编码规范是PEP8,但是在市级开发中有的公司严格要求PEP8规范开发, 有的公司不会在乎那些,在我的理解中,程序员如果想走的更高 ...

  9. 基于开源 Openfire 聊天服务器 - 开发Openfire聊天记录插件

    原文:http://www.cnblogs.com/hoojo/archive/2013/03/29/openfire_plugin_chatlogs_plugin_.html 随笔-150  评论- ...

  10. Python json & pickle, shelve 模块

    json 用于字符串和python的数据类型间的转换 四个功能 dumps dump loads load pickle 用于python特有的类型和python的数据类型进行转换 四个功能 dump ...