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. JS变量、作用域、内存

    写到这个题目<JS变量.作用域,内存>,我就不由自主想起了黄金三嫖客.可能是名字有点像,嗯,一定是这样子的! JS接触下来,应该是要比Java简单不少的,所以,要学好啊.立个flag半年后 ...

  2. PL/SQL 报错：动态执行表不可访问，本会话的自动统计被禁止。 在执行菜单里你可以禁止统计，或在v$session，v$sesstat 和vSstatname表里获得选择权限。

    现象: 第一次用PL/SQL Developer连接数据库,若用sys用户登录并操作则正常,若用普通用户比如haishu登录并创建一个表则报错“动态执行表不可访问,本会话的自动统计被禁止.在执行菜单里 ...

  3. 树莓派安装samba服务

    1.安装 sudo apt-get update sudo apt-get install samba sudo apt-get install samba-common-bin 2.配置 sudo ...

  4. python列表的通用操作

    #'+'和'*'#+可以将两个列表拼接为一个列表my_list = [1,2,3]+[4,5,6]#*可以将列表重复指定的次数my_list = [1,2,3]*5 print(my_list) #创 ...

  5. x01.polls: 学习 django

    开发一个 Web 应用:x01.polls,可能比想像的还要容易一些,这完全得益于 django 框架. 1.安装 django: sudo pip3 install django 2.阅读 djan ...

  6. bat脚本,winscp,shell加mysql存储过程实现mysql单条数据迁移

    起因 公司有个任务,需要迁移mysql中的单条数据.从公司的dev环境到staging环境,dev环境的mysql安装在windows server 2012 R2下,stage是aws的服务器不能直 ...

  7. linux——高级文本处理命令之wc、cut、sort

    1.  wc :Word Count 命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出 1.1 命令格式: wc [选项]文件... 1.2 命令参数: -c 统计字节数. -l  ...

  8. 两组数据的均值是否具有显著差异的T检验

    最近在做分析的时候,遇到了T检验,然而对于没有统计学背景的人来说完全不知如何下手 当然了,遇到问题第一反应就是百度. 果然百度出来了很多链接,当时第一次直接选择了用Excel去做T检验.下面是源数据 ...

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

    20155214 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 Chapter4 一个原始码中可以有多个类定义,但只能有一个公开类,且文档中的主文档名必须与 ...

  10. 20155239 《Java程序设计》实验三（敏捷开发与XP实践）实验报告

    实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 学会使用git 学会代码的重构 实现团队合作 团队分工 20155239:按照老师的实验三教程,逐步实验,编写代码,并用git上传,下载团 ...