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>

猜你喜欢

转载自www.cnblogs.com/Py-king/p/10592300.html