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

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

配置视图

​
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. D - Pagodas

    n pagodas were standing erect in Hong Jue Si between the Niushou Mountain and the Yuntai Mountain, l ...

  2. 关于OpenJDK和Orcale JDK区别

    一.环境Centos 今天搞tomcat发现了一个问题,众所周知,tomcat需要java环境支持,然后我今天就想着尝试yum安装java,命令 yum install -y java* 确实可以安装 ...

  3. easyui---修改删除查询

    修改:在toolsbar 修改工具中 { text:"编辑用户", iconCls:"icon-edit", handler:function(){ var s ...

  4. d4

    # s = '132a4b5c'# s1 = s[0]+s[2]+s[1]# print(s1)#使用while和for循环分别打印字符串s=’asdfer’中每个元素.s = 'fkld'# for ...

  5. MyEclipse中的几种查找方法

    在编程中常常需要用到查找功能,这里根据日常的使用总结一下常用的集中查找方法 Ctrl+H:在MyEclipse中打开Search弹出框,或者在菜单中打开Search弹出框, 定位到 File Sear ...

  6. CH6201 走廊泼水节【最小生成树】

    6201 走廊泼水节 0x60「图论」例题 描述 [简化版题意]给定一棵N个节点的树,要求增加若干条边,把这棵树扩充为完全图,并满足图的唯一最小生成树仍然是这棵树.求增加的边的权值总和最小是多少. 我 ...

  7. [No000012B]WPF(3/7)有趣的边框和画刷[译]

    介绍 边框是每个WPF程序的主要构成块.在我现在的程序中,我使用了很多的边框来装饰界面.从把边框直接放到窗口中到把边框放到控件模板和列表项中,边框在创建一个好的应用界面上扮演了一个非常重要的角色.在这 ...

  8. 闭区间套定理（Nested intervals theorem）讲解2

    ①确界与极限,看完这篇你才能明白 http://www.cnblogs.com/iMath/p/6265001.html ②这个批注由这个问题而来 表示$c$可能在$\bigcap_{n=1}^{\i ...

  9. php之变量和常量

    PHP中的变量用一个美元符号后面跟变量来表示.变量名是区分大小写的. 变量与PHP中其它的标签一样遵循相同的规则.一个有效的变量名有字母或者下划线开头,后面跟上任意数量的字母,数字,或者下划线. 按照 ...

  10. Verilog HDL语言实现的单周期CPU设计（全部代码及其注释）

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...