zoukankan      html  css  js  c++  java
  • 2019.03.25 Ajax三级联动

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

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

    配置视图


    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>
  • 相关阅读:
    CI框架 -- 核心文件 之 Loader.php(加载器)
    CI框架 -- 核心文件 之 Lang.php(加载语言包)
    CI框架 -- 核心文件 之 Input.php(输入数据处理文件)
    CI框架 -- 核心文件 之 Hooks.php
    CI框架 -- 核心文件 之 Exceptions.php
    CI框架 -- 配置文件config.php
    网站后台发通知页面效果图
    校内通知-Notifications表增加老师,家长,学生发送范围字段
    jqGrid设置指定行的背景色
    SQLServer数据库监控代码
  • 原文地址:https://www.cnblogs.com/Py-king/p/10592300.html
Copyright © 2011-2022 走看看