Django实现省市县级联菜单
生活随笔
收集整理的這篇文章主要介紹了
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、項目目錄：
6、數據庫內容：
7、最后結果：
?
參考自：https://www.cnblogs.com/Lin-Yi/p/7550067.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Django实现省市县级联菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bootstrap里col-xs , c
- 下一篇： 史上最全提现模块案例分解