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. 推荐一个网址：在线检查Yam文件语法格式的错误

    最近在学习Docker和K8S内容时候,经常会遇到要自己写一些容器部署或者组件部署的yaml文件. 但是苦于没有彻底熟悉yaml,有时候要到kubectl creat -f path 部署命令执行后, ...

  2. lrzsz Linux服务器Windows互传文件工具

    lrzsz是一款在linux里可代替ftp上传和下载的程序,但只限于较小的文件,如果是目录需要打包成单个文件在实现下载. 条件:需要使用SecureCRT或者Xshell等客户端工具连接Linux 下 ...

  3. 浅谈es5和es6中的继承

    首先给大家介绍下在es5中构造函数的继承 function A(){ 2 //构造函数A 3 this.name="我是A函数"; 4 } 5 6 A.prototype={ 7 ...

  4. mongodb的docker化安装

    查询mongo镜像 docker search mongo 拉取镜像(拉取STARS最多的那个就可以了) docker pull mongo tips:如果拉取不成功,多pull几次就可以了. 使用自 ...

  5. MongoDB安装及启动

    本机环境系统:Debian 9桌面系统:KDE Plasma ## 官网下载自己系统最新稳定版 https://www.mongodb.com/download-center#community 选择 ...

  6. helpera64开机bootlogo-BUG

    环境: HelperA64开发板 Linux3.10内核 时间:2019.01.12 目标:修改开机bootlogo的BUG 问题: 1.24bit深度的bootlogo.bmp图片会导致Qt5有色差 ...

  7. MySQL - CentOS 下 MySQL 5.6 安装

    1. 概述 最近没啥东西可写, 随便写点 mysql 5.6 的安装 去年写的 装上去过 三次以上 2. 准备 系统 CentOS 7.4 3. 安装 1. 直接安装 # mysql服务端: mysq ...

  8. C#——数据库取数据，DataGridView显示数据

    使用未封装的方法连接数据库 步骤: 一.确定连接方式(以SqlServer为例): ①Windows身份验证. string ConnectionType = "server=.;datab ...

  9. Java六大设计原则

    类的设计原则     依赖倒置原则-Dependency Inversion Principle (DIP) 里氏替换原则-Liskov Substitution Principle (LSP) 接口 ...

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

    20155212 实验一<Java开发环境的熟悉>实验报告 命令行下Java程序开发 命令创建实验目录 输入mkdir 2051212创建以自己学号命名的文件夹,通过cd 20155212 ...