JSon实现三级联动

我觉得我这个方法比较麻烦，但是目前技术还比较弱，所以先做个笔记自己理解。目前没有和后台交互，只是在前台页面实现了

jQuery和JSon数据实现的，代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>JSON</title>

 <script type="text/javascript" src="../WEB-INF/jquery-1.4.2.min.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

         //省份，城市，乡镇的数据

         var cpJson =[

               {

                 "p" : "银川市",

                 "c" : [{"c1":"兴庆区"},{"c1":"金凤区"},{"c1":"西夏区"},{"c1":"中宁县"},{"c1":"灵武市"},{"c1":"贺兰县"}],

                 "d" : [{"c":"兴庆区","d":"兴庆区-1"},{"c":"兴庆区","d":"兴庆区-2"},{"c":"兴庆区","d":"兴庆区-3"},{"c":"金凤区","d":"金凤区-1"},{"c":"灵武市","d":"灵武市-1"},{"c":"灵武市","d":"灵武市-2"}]

               },

               {

                 "p" : "石嘴山市",

                 "c" : [{"c1":"大武口区"},{"c1":"惠农区"},{"c1":"平罗县"}],

                 "d" : [{"c":"大武口区","d":"大武口区-1"},{"c":"大武口区","d":"大武口区-2"},{"c":"大武口区","d":"大武口区-3"},{"c":"惠农区","d":"惠农区-1"},{"c":"平罗县","d":"平罗县-1"}]

               },

               {

                 "p" : "吴忠市",

                 "c" : [{"c1":"利通区"},{"c1":"红寺堡区"},{"c1":"盐池县"},{"c1":"同心县"},{"c1":"青铜峡市"}]

               },

               {

                 "p" : "中卫市",

                 "c" : [{"c1":"沙坡头区"},{"c1":"中宁县"},{"c1":"海原县"}]

               },

               {

                 "p" : "固原市",

                 "c" : [{"c1":"原州区"},{"c1":"泾源县"},{"c1":"西吉县"},{"c1":"隆德县"},{"c1":"彭阳县"}]

               }

             ];

         //初始化

         function init(obj){

             $("obj").html("<option>请选择</option>");

         }

         //获取省份的数据

         init($("#pro"));

         //获取有几个省份，通过循环遍历出来

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

             //获取到的数据

             var proresult = "<option value='"+cpJson[i].p+"'>"+cpJson[i].p+"</option>";

             //添加到显示省份的控件里

             $("#pro").append(proresult);

         }    

         //获取当前省份的城市。通过选取省份触发change()事件

         $("#pro").change(function(){

             init($("#city"));

             init($("#dis"));

             //清空前面选取时遗留的数据。gt(index)方法获取下标大于index的数据，index从0开始

             $("#city option:gt(0)").remove();

             $("#dis option:gt(0)").remove();

             for(var j = 0;j<cpJson.length;j++){

                 //判断选取的省份和JSon数据相匹配的数据

                 if($(this).attr("value") == cpJson[j].p){

                     //根据当前城市进行循环

                     for(var k = 0;k<cpJson[j].c.length;k++){

                         //获取当前省份对应的城市数据

                         var cityresult = "<option value='"+cpJson[j].c[k].c1+"'>"+cpJson[j].c[k].c1+"</option>";

                         //添加到城市控件里

                         $("#city").append(cityresult);

                     }

                 }

             }

         });

         //获取当前城市的乡镇。通过选取城市触发change()事件

         $("#city").change(function(){

             init($("#dis"));

             //清空前面选取时遗留的数据。gt(index)方法获取下标大于index的数据，index从0开始

             $("#dis option:gt(0)").remove();

             //根据省份循环

             for(var j = 0;j<cpJson.length;j++){

                 //根据城市循环

                 for(var k = 0;k<cpJson[j].c.length;k++){

                     //判断选取的城市和JSon数据相匹配的数据，如果没有对应的乡镇就进行下次循环

                     if($(this).attr("value") == cpJson[j].c[k].c1 && cpJson[j].d != null ){

                         ////根据乡镇循环

                         for(var n = 0;n<cpJson[j].d.length;n++){

                             //判断选取的城市和JSon数据相匹配的数据

                             if($(this).attr("value") == cpJson[j].d[n].c){

                                 //获取当前城市对应的乡镇数据

                                 var cityresult = "<option value='"+cpJson[j].d[n].d+"'>"+cpJson[j].d[n].d+"</option>";

                                 //添加到乡镇控件里

                                 $("#dis").append(cityresult);

                             }

                         }

                     }

                 }

             }

         });

 });

 </script>

 </head>

 <body>

 <div id="info">

 省份：<select id="pro"><option>请选择</option></select>

 城市：<select id="city"><option>请选择<option></select>

 乡镇：<select id="dis"><option>请选择<option></select>

 </div>

 </body>

 </html>

效果图：

如果变换省份的话：

如果前面没有添加这两句话的时候，

结果如下：

使用JSon实现三级联动的更多相关文章

  1. JQuery+Json 省市区三级联动

    一.画面以及JS <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content=&qu ...

  2. 中国省市区json数据 三级联动

    <label> <span>购买地址</span> <select name="PurchaseProvince" style=" ...

  3. jquery json ajax三级联动

    province_city_area.jsp <%@ page language="java" pageEncoding="UTF-8"%> < ...

  4. Hibernate+struts+JqueryAjax+jSON实现无刷新三级联动

    看网上JqueryAjax三级联动的例子讲不是很全,代码也给的不是很全,给初学者带来一定的难度.小弟自己写了一个,可能有些地方不是很好,希望大家能够提出建议. 用的是Hibernate+struts2 ...

  5. 省市区三级联动[JSON+Jquery]

    <!DOCTYPE html><head> <title>省市区三级联动[JSON+Jquery]</title> <script src=&qu ...

  6. Ajax异步请求struts的JSON机制(省市区三级联动)

    1.struts.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts P ...

  7. android：省市县三级联动（基于json和spring）

    一.请看效果图": 二.程序的代码: 1.MainActivity.java package com.loveplusplus.loader.demo.ui; import org.json ...

  8. 根据参数显示类别（三级联动，需要JSON数据）

    根据参数显示类别(三级联动,需要JSON数据) Scripts/Category.js 调用方法: $(function () { BindCategory(); //默认绑定文本框中的值 BindC ...

  9. Jquery select 三级联动 (需要JSON数据)

    Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...

随机推荐

  1. node 借助Node Binary管理模块“n”更新

    Node.js的版本频繁变化,如果有模块不能在你当前的Node版本上使用,需要升级Node环境 1)首先:查看当前node版本:node –v 2)安装n模块:npm install -g n 3)检 ...

  2. day 90 DjangoRestFramework学习二之序列化组件

      DjangoRestFramework学习二之序列化组件   本节目录 一 序列化组件 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 序列化组件 首先按照 ...

  3. 基于STM32的简易磁卡充值系统

    使用的是MFRC522射频模块,把磁卡放入感应区后,可以执行三种操作: 初始化磁卡金额 读取卡内金额 向卡内写入金额(充值) 本来想着回学校了能把洗浴卡的金额给改掉,实现帝皇般的尊贵洗浴享受(不花钱… ...

  4. python3内置函数大全

    由于面试的时候有时候会问到python的几个基本内置函数,由于记不太清,就比较难受,于是呕心沥血总结了一下python3的基本内置函数 Github源码:        https://github. ...

  5. python爬虫同时输出两个列表（zip函数）

    简介:在做爬虫时,xpath返回的是列表格式,我们又需要将列表中的元素一一对应并存放至字典中,这是就可以用zip函数. zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组, ...

  6. 虚拟机内安装Centos7步骤

    下面就来看看怎么安装centos7,首先就是要准备一个虚拟机了 简称VM,当然虚拟机的安装步骤,我也不再多说,我用的Workstation 15 Pro的版本,我们直接打开虚拟机,打开界面如下: 在安 ...

  7. 20155220 实验一《Java开发环境的熟悉》实验报告

    实验一Java开发环境的熟悉 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验知识点 1.JVM.JRE.JDK的安装位置与区 ...

  8. 20155227 2016-2017-2 《Java程序设计》第十周学习总结

    20155227 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 Java的网络编程 网络编程 就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所 ...

  9. 20155319 2016-2017-2 《Java程序设计》第十周学习总结

    20155319 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 计算机网络编程概述 网络编程就是两个或多个设备之间的数据交换,其实更具体的说,网络编程就是两 ...

  10. [BZOJ2961]共点圆-[凸包+cdq分治]

    Description 传送门 Solution 考虑对于每一个点: 设圆的坐标为(x,y),点的坐标为(x0,y0).依题意得,当一个点在圆里,需要满足(x-x0)2+(y-y0)2<=x2+ ...