Django实现省市县级联菜单

1、创建工程mymenu和项目menu。

2、改变mymenu中setting.py的DIRS，STATICFILES_DIRS

'DIRS': [BASE_DIR + "/templates"],  #后面若无数据，不可以加逗号

STATICFILES_DIRS = (os.path.join(BASE_DIR,'static'),
)

3、在menu中建立views.py和models.py并建立相关代码

models.py代码：

from django.db import models# Create your models here.
# 建立城市自关联数据库表
class AreaInfo(models.Model):aid=models.IntegerField(default=0)atitle = models.CharField(max_length=30)aParent = models.IntegerField(null=True,blank=True)def __str__(self):return self.atitleclass Meta:db_table = 'areas'  # 指定表名称

views.py代码：

from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
from menu import models
from .models import AreaInfo
# Create your views here.
# 级联菜单
def getAreas(request):return render(request,'getAreas.html')#获得省份
def getProvince(request):provinces = AreaInfo.objects.filter(aParent = 0)res = []for i in provinces:res.append( [i.aid , i.atitle] )return JsonResponse({'provinces':res})#获得城市
def getCity(request):city_id = request.GET.get('city_id')cities = AreaInfo.objects.filter(aParent=city_id)res = []for i in cities:res.append([i.aid, i.atitle])return JsonResponse({'cities':res})#获得区 县
def getDistrict(request):district_id = request.GET.get('district_id')cities = AreaInfo.objects.filter(aParent=district_id)res = []for i in cities:res.append([i.aid, i.atitle])return JsonResponse({'district': res})def test(request):# models.AreaInfo.objects.create(aid='1',atitle='陕西省',aParent='0')# models.AreaInfo.objects.create(aid='2', atitle='山西省',aParent='0')# models.AreaInfo.objects.create(aid='101', atitle='渭南市',aParent='1')# models.AreaInfo.objects.create(aid='102', atitle='宝鸡市', aParent='1')# models.AreaInfo.objects.create(aid='201', atitle='吕梁市', aParent='2')# models.AreaInfo.objects.create(aid='202', atitle='忻州市', aParent='2')# models.AreaInfo.objects.create(aid='10101', atitle='渭南1', aParent='101')# models.AreaInfo.objects.create(aid='10102', atitle='渭南2', aParent='101')# models.AreaInfo.objects.create(aid='10201', atitle='宝鸡1', aParent='102')# models.AreaInfo.objects.create(aid='10202', atitle='宝鸡2', aParent='102')# models.AreaInfo.objects.create(aid='20101', atitle='吕梁1', aParent='201')# models.AreaInfo.objects.create(aid='20102', atitle='吕梁2', aParent='201')# models.AreaInfo.objects.create(aid='20201', atitle='忻州1', aParent='202')# models.AreaInfo.objects.create(aid='20202', atitle='忻州2', aParent='202')# models.AreaInfo.objects.all().delete()# result = models.AreaInfo.objects.all()# for row in result:#     print(row.aid, row.atitle, row.aParent)# 输出省# provinces = AreaInfo.objects.filter(aParent='0')# res = []# for i in provinces:#     res.append([i.aid, i.atitle])# print(res)   #输出省#根据省的aParent输出市# a=1# city_id = request.GET.get(a)# print('city_id',city_id)# cities = models.AreaInfo.objects.filter(aParent=a)# # for row in cities:# #     print(row.aid,row.atitle)# res = []# for i in cities:#     res.append([i.aid, i.atitle])# print(res)# 根据市的aParent输出县# district_id = request.GET.get('district_id')# cities = AreaInfo.objects.filter(aParent=101)# res = []# for i in cities:#     res.append([i.aid, i.atitle])# print(res)# return JsonResponse({'district': res})return HttpResponse('tianjiachenggong！！！')

4、建立getAreas.html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>省市县菜单</title><script src="/static/jquery.min.js"></script></head>
<body>
<select id="province" name="province" ><option value="">请选择省份</option>
</select>
<select id="city" name="city"><option value="">请选择城市</option>
</select>
<select id="district" name="district"><option value="">请选择区/县</option>
</select>
</body>
<script>$(function(){// 获取省份
$.get('/getProvince/',function(data){
for(var i = 0,len = data.provinces.length; i<len ;i++){$new = $("<option value="+data.provinces[i][0] +">"+  data.provinces[i][1]  +"</option>" );$("#province").append( $new );
}
});//改变省份后
$("#province").change(function(){
//清空市和区
$("#city").empty().append('<option value="">请选择城市</option>');
$("#district").empty().append('<option value="">请选择区/县</option>');
$.ajax({url:'/getCity/',type:'get',data:{"city_id":$(this).val()}
}).done(function(data){for(var i = 0,len = data.cities.length; i<len ;i++){$new = $( "<option value="+data.cities[i][0] +">"+  data.cities[i][1]  +"</option>" );$("#city").append( $new );}
});
});//改变城市后
$("#city").change(function(){
//清空市和区
$("#district").empty().append('<option value="">请选择区/县</option>');
$.ajax({url:'/getDistrict/',type:'get',data:{"district_id":$(this).val()}
}).done(function(data){for(var i = 0,len = data.district.length; i<len ;i++){$new = $( "<option value="+data.district[i][0] +">"+  data.district[i][1]  +"</option>" );$("#district").append($new );}
});
});})
</script>
</html>

注意：js的引用

5、项目目录：