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

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

配置视图


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. C - Monthly Expense

    Farmer John is an astounding accounting wizard and has realized he might run out of money to run the ...

  2. Spark RDD Action 简单用例(二)

    foreach(f: T => Unit) 对RDD的所有元素应用f函数进行处理,f无返回值./** * Applies a function f to all elements of this ...

  3. Linux 查看进程运行的完整路径方法

    通过ps及top命令查看进程信息时,只能查到相对路径,查不到的进程的详细信息,如绝对路径等. 这时,我们需要通过以下的方法来查看进程的详细信息: Linux在启动一个进程时,系统会在/proc下创建一 ...

  4. 删除一个cjson导致系统死机

    一个未使用,未分配的cjson指针应该被删除,如果尝试删除一个 未分配,未启用的cjson将导致内存出错,死机.

  5. [No0000168]Excle只允许用户输入纯文本,禁止用户修改单元格样式、格式等

    背景:自己的模板给别人,让他填完信息上传到系统里,但别人经常不按模板的格式来填写,导致无法程序自动化.能不能在模板上把格式锁住,只允许输入纯文本,但不能改格式? 方法: 步骤一,创建你要的模板 其中, ...

  6. hdu 6390 欧拉函数+容斥(莫比乌斯函数) GuGuFishtion

    http://acm.hdu.edu.cn/showproblem.php?pid=6390 题意:求一个式子 题解:看题解,写代码 第一行就看不出来,后面的sigma公式也不会化简.mobius也不 ...

  7. 【实战解析】基于HBase的大数据存储在京东的应用场景

    京东技术 https://mp.weixin.qq.com/s?src=11&timestamp=1551342955&ver=1455&signature=0hYp8OsxY ...

  8. int 存储大小 数组元素个数

    为了得到某个类型或某个变量在特定平台上的准确大小,您可以使用 sizeof 运算符.表达式 sizeof(type) 得到对象或类型的存储字节大小.下面的实例演示了获取 int 类型的大小: 实例 # ...

  9. Java代码中获取Json的key值

    测试json字符串: {"access_token":"hkbQl5o_l67dZ7_vJRATKBwTLk9Yj5QyMuOJThAr8Baj0xWf4wxW1p4ym ...

  10. pandas与sqlalchemy交互实现科学计算

      import pandas as pd import numpy as np from sqlalchemy import create_engine #建立数据库引擎 engine = crea ...