所谓三级联动就是，一层接着一层，根据上一层的选择给出这一层的结果

如选择市之后，会给出相应的区，然后到相应的县这就是联动

配置视图

​
from django.core import serializers
​
def showMenuInfo(request):
    pid = request.GET.get('pid',-1)
    pid = int(pid)
    areaList = Area.objects.filter(parentid=pid)
    jAreaList = serializers.serialize('json',areaList)
​
​
    return JsonResponse({'areaList':jAreaList})
​

配置模板页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
​
    <script>
        $(function(){
            showProvince();
        });
​
        function showProvince(){
            showArea('province',0,showCity);
        }
​
        function showCity(){
            showArea('city',$('#province').val(),showTown);
        }
​
        function showTown(){
            showArea('town',$('#city').val());
        }
​
​
        function showArea(selectId,pid,nextLoad){
            $('#'+selectId).empty();
            $.get('/stu/showMenu/',{'pid':pid},function(result){
                //将JSON字符串转成JSON对象
                areaList = JSON.parse(result.areaList);
​
​
                for(var i=0;i<areaList.length;i++){
                    var area = areaList[i];
                    $('#'+selectId).append("<option value='"+area.pk+"'>"+area.fields.areaname+"</option>")
​
​
                }
​
                if(nextLoad!=null){
                    nextLoad();
                }
​
            })
        }
​
    </script>
</head>
<body>
​
​
​
    <select id="province" onchange="showCity();"></select>
    <select id="city" onchange="showTown();"></select>
    <select id="town"></select>
</body>
</html>

2019.03.25 Ajax三级联动的更多相关文章

  1. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  2. [2019.03.25]Linux中的查找

    TMUX天下第一 全世界所有用CLI Linux的人都应该用TMUX,我爱它! ======================== 以下是正文 ======================== Linu ...

  3. 使用 AJAX + 三级联动 实现分类出全国各地的省，市，区

    使用AJAX + 三级联动  实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一 ...

  4. AJAX 三级联动

    新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...

  5. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  6. 0509 关于Ajax + 三级联动示例

    关于Ajax 1.干什么的? ajax负责抓取用户名信息,传递给服务器进行校验: 2.属性: onreadystatechange:事件,该事件可以感知ajax状态(readyState)的变化.aj ...

  7. [Ajax三级联动 无刷新]

    三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...

  8. ajax 三级联动商品分类（转载）

    转载  自  jines     http://www.cnblogs.com/lijinblogs/p/5759399.html 思路分析:效果:当页面加载时,利用ajax异步向后台请求数据,加载一 ...

  9. 2019.03.24 Ajax

    也还是会用到jquery中的Ajax请i求 所以第一还是引入jQuery包   可以去网上搜腾讯网静态资源库 然后引入包    Ajax还是异步处理  处理堵塞问题  import time 就可以了 ...

随机推荐

  1. FOREIGN MySQL 之 多表查询

    一.多表联合查询 #创建部门 CREATE TABLE IF NOT EXISTS dept ( did int not null auto_increment PRIMARY KEY, dname ...

  2. [Asp.net]缓存简介

    写在前面 针对一些经常访问而很少改变的数据,使用缓存,可以提高性能.缓存是一种用空间换取时间的技术,说的直白点就是,第一次访问从数据库中读取数据,然后将这些数据存在一个地方,比如内存,硬盘中,再次访问 ...

  3. .NET Core开发日志——Runtime IDentifier

    .NET Core对于传统.NET开发人员而言是既熟悉又陌生的新平台,所以有时遇上出乎意料的事情也纯属正常情况.这时只需点耐心,多查查资料,努力找到原因,也未尝不是件有意义的体验. 比如当建完一个最简 ...

  4. 10.11JAVA作业

    [实验任务一]:素数输出 1. 实验要求: (1)编写判断该数是否为素数的方法,并在主方法中对其进行调用. (2)注意编程规范:程序开头部分的目的,作者以及日期:必要的空格与缩进,适当的注释等: (3 ...

  5. 使用Sqlserver事务发布实现数据同步(sql2008)_Mssq l数据库教程

    事务的功能在sqlserver中由来已久,因为最近在做一个数据同步方案,所以有机会再次研究一下它以及快照等,发现还是有很多不错的功能和改进的.这里以sqlserver2008的事务发布功能为例,对发布 ...

  6. c#加"\n\r"不换行,变成字符串

    质检模块,本想将每个错误分行, 比如:lyrerrormess += lyrname + "图层" + "缺少" + xmlFieldName + " ...

  7. Canonical form

    https://en.wikipedia.org/wiki/Canonical_form#Linear_algebra Suppose we have some set S of objects, w ...

  8. Flink – CEP NFA

    看看Flink cep如何将pattern转换为NFA? 当来了一条event,如果在NFA中执行的? 前面的链路,CEP –> PatternStream –> select –> ...

  9. js如何判断哪个按钮被点击了？

    用事件委托,然后判断target,代码如下: $(docuement).on('click',function(event){ event.target... }) 例如:点击.c1之外任意地方的时候 ...

  10. Master-Worker集群计算demo

    Task为要执行的任务实体类: package com.viewhigh.mdop.bi.test; /** * Created by zzq on 2017/5/11. */ public clas ...