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>
  • 相关阅读:
    Error -26631: HTTP Status-Code=400 (Bad Request) for
    mysql中的制表符替换
    mysql中json数据的拼接方式
    使用Nightwatch.js做基于浏览器的web应用自动测试
    Selenium + Nightwatch 自动化测试环境搭建
    Python web 框架:web.py
    转 Python Selenium设计模式-POM
    自动化测试
    日志打印longging模块(控制台和文件同时输出)
    读取配置文件(configparser,.ini文件)
  • 原文地址:https://www.cnblogs.com/Py-king/p/10592300.html
Copyright © 2011-2022 走看看