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. Java面试题整理2

    多线程部分 并行和并发的区别? 并行指两个或多个事件同一时刻发生:并发指两个或多个事件同一时间间隔发生. 并行是在不同实体上的多个事件,并发是在同一实体上的多个事件. 线程和进程的区别? 进程是程序运 ...

  2. 关于FusionCharts需要第一次点击切换才出现问题

    最近博住接到个任务 FusionCharts生成数据发现一个问题 只有点击才切换显示 而且加载不出现全部,改成这样 然后在生成部分添加如下代码 就ok了 每天记录一点感谢大家.

  3. ajaxSubmit请求返回数据成功，但是不执行success回调函数

    最近项目涉及到附件上传就头痛,一直在用plupload插件在做...ie9偶尔抽风但还是可以的... 然后有个需求,表格每行都有个上传按钮,页面多上传按钮. 一.开始的时候,用plupload做的,多 ...

  4. django 登录注册注销

    一.设计数据模型 1.数据库模型设计 作为一个用户登录和注册项目,需要保存的都是各种用户的相关信息.很显然,我们至少需要一张用户表User,在用户表里需要保存下面的信息: 用户名 密码 邮箱地址 性别 ...

  5. appache 端口 更改

    外网访问---->hosts文件映射服务名(127.0.0.1 xiaotian.cn)-->appache中httpd文件监听相关端口号(*:8080)--->appache中的v ...

  6. 20155215 2016-2017-2 《Java程序设计》第4周学习总结

    20155215 2016-2017-2 <Java程序设计>第X周学习总结 教材学习内容总结 第六章 继承,避免多个类间重复定义共同行为.子类继承父类,再扩充(extends)其他行为. ...

  7. 20155306 2016-2017-2《Java程序设计》课程总结

    20155306 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 •预备作业1:对自己专业看法及.学习Java的期望,以及心中的师生关系. •预备作业2:C ...

  8. # 学号20155308 2006-2007-2 《Java程序设计》第4周学习总结

    学号20155308 2006-2007-2 <Java程序设计>第4周学习总结 教材学习内容总结 6.1 何谓继承 继承基本上就是避免多个类间重复定义共同行为. 许多类之间具有相同的属性 ...

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

    20155328 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 JAVA和ANDROID开发学习指南 第22章 网络概览 两台计算机用于通信的语言叫做&qu ...

  10. Deepin Linux下的Metasploit安装及优化

    前言 本文不限于Deepin Linux系统,类似的在ubuntu debian xubuntu等血统类似的Linux发行版中都可以使用这里方法来安装原生的metasploit 配置Kali Linu ...