附件连接下载地址：http://files.cnblogs.com/files/CaktyRiven/js.zip

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>三级联动</title>

</head>

<body>

  <select name="" id="province">

     <option value="">请选择省</option>

  </select>

  <select name="" id="city">

      <option value="">请选择市</option>

  </select>

 <select name="" id="county">

      <option value="">请选择区/县</option>

  </select>

  <script type="text/javascript" src="china.js"></script>

  <script type="text/javascript">

   //获取省、市、县/区、节点

   var body = document.body;

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

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

   var county = document.getElementById("county");

   //将chain.js里面的字符串通过JSON转换成对象

   var chinaArea = JSON.parse(chinaArea);

   //通过点访问法访问对象，将结果赋给定义好的省列表

   var provinceList =chinaArea.china.province;

   //for循环遍历省份列表长度

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

            //新建option节点

            var option = document.createElement("option");

            //将通过中括号访问法访问对象属性["-name"]中的省份名赋给option。

            option.innerHTML = provinceList[i]["-name"];

            //将option添加到province 的select下拉列表里

            province.appendChild(option);

    }

    //定义城市列表为空

    var cityList=null;

    //利用onchang方法获取下拉列表中的对象

    province.onchange=function(){

               //清空城市/区县列表

               city.innerHTML ="<option>请选择市</option>";

               county.innerHTML="<option>请选择区/县</option>";

               //通过this.selectedIndex获取select列表的下标

               if(this.selectedIndex >0){

                   //同理，通过点访问法和中括号访问法访问对象，将获取的城市赋给cityList

               cityList = chinaArea.china.province[this.selectedIndex -1].city;

               //同理、遍历城市列表的长度、新建option、赋值、并添加

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

               var option = document.createElement("option");

               option.innerHTML = cityList[i]["-name"];

               city.appendChild(option);

               }

             }

           }

         //县区的的做法同城市的原理一致，都是通过访问获得县区长度及name，再遍历县区长度，相应赋值

    city.onchange = function(){

                county.innerHTML="<option>请选择区/县</option>";

                if(this.selectedIndex >0){

                   for(var i=0;i<cityList[this.selectedIndex -1].county.length;i++){

                    var option = document.createElement("option");

                    option.innerHTML =cityList[this.selectedIndex -1].county[i]["-name"];

                    county.appendChild(option);

                }

                }

             }

  </script>

</body>

</html

2017.05.02 -- 新增 ，js+jquery，省市区三级联动，封装函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>三级联动</title>

</head>

<body>

  <select name="" id="province">

     <option value="">请选择</option>

  </select>

  <select name="" id="city">

      <option value="">请选择</option>

  </select>

 <select name="" id="county">

      <option value="">请选择</option>

  </select>

  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

  <script type="text/javascript" src="js/china.js"></script>

  <script type="text/javascript">

   //将chain.js里面的字符串通过JSON转换成对象

   var chinaArea = JSON.parse(chinaArea);

   console.log(chinaArea);

   //通过点访问法访问对象，将结果赋给定义好的省列表

   var provinceList =chinaArea.china.province;

   function address(piv,cit,coy){

          //获取省、市、县/区、节点

           var province =$(piv);

           var city = $(cit);

           var county = $(coy);

           //for循环遍历省份列表长度

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

                    //新建option节点

                    var option = document.createElement("option");

                    //将通过中括号访问法访问对象属性["-name"]中的省份名赋给option。

                    option.innerHTML = provinceList[i]["-name"];

                    //将option添加到province 的select下拉列表里

                    // province.appendTo(option);

                    province.append(option);

            }

            //定义城市列表为空

            var cityList =null;

            //利用onchang方法获取下拉列表中的对象

            province.change(function(){

                       //清空城市/区县列表

                       city.html ("<option>请选择市</option>");

                       county.html("<option>请选择区/县</option>");

                       //通过this.selectedIndex获取select列表的下标

                       if(this.selectedIndex >0){

                       //同理，通过点访问法和中括号访问法访问对象，将获取的城市赋给cityList

                       cityList = chinaArea.china.province[this.selectedIndex -1].city;

                       //同理、遍历城市列表的长度、新建option、赋值、并添加

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

                       var option = document.createElement("option");

                       option.innerHTML = cityList[i]["-name"];

                       city.append(option);

                       }

                     }

                   })

                 //县区的的做法同城市的原理一致，都是通过访问获得县区长度及name，再遍历县区长度，相应赋值

            city.change(function(){

                county.innerHTML="<option>请选择区/县</option>";

                  if(this.selectedIndex >0){

                     for(var i=0;i<cityList[this.selectedIndex -1].county.length;i++){

                      var option = document.createElement("option");

                      option.innerHTML =cityList[this.selectedIndex -1].county[i]["-name"];

                      county.append(option);

                  }

                }

             })

   }

   address(province,city,county);

  </script>

</body>

</html>

JavaScript 三级联动的更多相关文章

  1. 转: javascript实现全国城市三级联动菜单代码

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

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

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

  3. JavaScript实现省市区的三级联动

    JavaScript实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...

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

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

  5. 【JavaScript&jQuery】省市区三级联动

    HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...

  6. javascript 省、市、地县三级联动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD&g ...

  7. 原生javascript制作省市区三级联动详细教程

    多级联动下拉菜单是前端常见的效果,省市区三级联动又属于其中最典型的案例.多级联动一般都是与数据相关联的,根据数据来生成和修改联动的下拉菜单.完成一个多级联动效果,有助于增强对数据处理的能力. 本实例以 ...

  8. 原生javascript实现省市区三级联动

    腾讯IP分享计划(http://ip.qq.com/)有个现成的三级联动功能,查看源码后发现可以直接使用其单独的JS文件(http://ip.qq.com/js/geo.js). 分析后发现自己需要写 ...

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

    二级联动: html代码: <body> <select id="province" onchange="getCity(this.options.se ...

随机推荐

  1. R语言：规划求解优化ROI

    今天看到一篇文章介绍如何用excel建模对ROI 进行规划求解. 蓝鲸的网站分析笔记 成本 Cost 每次点击费用 CPC 点击量 \[clickRate = \frac{cost}{CPC}\] 转 ...

  2. [Qt]用QItemDelegate的来修改QStandardItem字体颜色

    1.重写ItemDelegate的Item方法 这里我使用的QListView来显示Log日志,将写好的代理在初始化中就可以直接赋值上. m_LogModel = new QStandardItemM ...

  3. PHP mysql与mysqli事务详解

    官方对PHP连接到MySQL数据库服务器的三种主要的API简介如下: http://php.net/manual/zh/mysqli.overview.php PHP mysql与mysqli事务详解 ...

  4. CDN的特点

    CDN的特点 1.本地Cache加速提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度,并大大提高以上性质站点的稳定性(省钱,用户体验提升). 2.镜像服务消除了不同运营商之间的瓶颈造成的影响 ...

  5. javascript数据结构-数组

    github博客地址 简介 数组是最简单的数据结构,javascript语言也很早就原声支持了数组Array数据类型,和其他语言略微不同的是:js中的数组可以存储不同类型的值,看起来很厉害的样子,但是 ...

  6. touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  7. TypeError: test() got multiple values for keyword argument 'key'

    原因是: 1.函数调用的最终形式只会调用两个函数.一个list参数和一个dict参数,格式为call(func, list, dict); 2.如果传入参数中有key参数,那么首先key参数(包括扩展 ...

  8. 【krpano】krpano xml资源解密（破解）软件说明与下载

    欢迎加入qq群551278936讨论krpano技术以及获取最新软件.   最新版本软件下载:http://www.cnblogs.com/reachteam/p/5455675.html 该软件已经 ...

  9. 51nod1118(水题)

    题目链接: https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1118 题意: 中文题诶~ 思路: 因为机器人只能往下或者右 ...

  10. Xshell5连接虚拟机出现连Could not connect to '192.168.47.128' (port 22): Connection failed，解决办法

    该日记写于2016年11月28日.在用Xshell5连接ubuntu虚拟OS时一直连接不上.出现这种情况的原因可能很多,有像百度上面说的没有关闭linux的防火墙,没有启动linux的ssh服务.但这 ...