Django實現省市縣自關聯的下拉級聯

時間 2019-11-20

原文原文鏈接

前端部分：三個下拉拉菜單進行級聯html

 1 <body>
 2 <select id="province" >
 3     <option value="">請選擇省份</option>
 4 </select>
 5 <select id="city">
 6     <option value="">請選擇城市</option>
 7 </select>
 8 <select id="district">
 9     <option value="">請選擇區/縣</option>
10 </select>
11 </body>

利用ajax進行get請求：前端

當改變省份的時候，將市和縣的信息清空（可能會上一次選擇省份再次選擇省份會市後面數據多餘），再利用ajax提交get獲取當前省份下的城市，放入city中ajax

當改變城市的時候，將縣的信息清空（屢次選擇會產生數據多餘），再利用ajax提交get獲取當前城市下的全部區縣放入district中數據庫

 1 $(function(){  2 
 3 // 獲取省份
 4 $.get('/getProvince/',function(data){  5 for(var i = 0,len = data.provinces.length; i<len ;i++){  6     $new = $("<option value="+data.provinces[i][0] +">"+  data.provinces[i][1]  +"</option>" );  7     $("#province").append( $new );  8 }  9 
10 }); 11 
12 
13 //改變省份後
14 $("#province").change(function(){ 15 //清空市和區
16 $("#city").empty().append('<option value="">請選擇城市</option>'); 17 $("#district").empty().append('<option value="">請選擇區/縣</option>'); 18 $.ajax({ 19     url:'/getCity/', 20     type:'get', 21 
22     data:{"city_id":$(this).val()} 23 }).done(function(data){ 24     for(var i = 0,len = data.cities.length; i<len ;i++){ 25         $new = $( "<option value="+data.cities[i][0] +">"+  data.cities[i][1]  +"</option>" ); 26         $("#city").append( $new ); 27  } 28 }); 29 }); 30 
31 //改變城市後
32 $("#city").change(function(){ 33 //清空市和區
34 $("#district").empty().append('<option value="">請選擇區/縣</option>'); 35 $.ajax({ 36     url:'/getDistrict/', 37     type:'get', 38     data:{"district_id":$(this).val()} 39 }).done(function(data){ 40     for(var i = 0,len = data.district.length; i<len ;i++){ 41         $new = $( "<option value="+data.district[i][0] +">"+  data.district[i][1]  +"</option>" ); 42         $("#district").append($new ); 43  } 44 }); 45 }); 46 
47 })

後端部分：後端

views視圖：app

 1 # 級聯菜單
 2 def getAreas(request):  3     return render(request,'booktest/getAreas.html')  4 
 5 #得到省份
 6 def getProvince(request):  7     provinces = AreaInfo.objects.filter(aParent__isnull = True)  8     res = []  9     for i in provinces: 10  res.append( [i.id , i.atitle] ) 11     return JsonResponse({'provinces':res}) 12 
13 #得到城市
14 def getCity(request): 15     city_id = request.GET.get('city_id') 16     cities = AreaInfo.objects.filter(aParent_id=city_id) 17     res = [] 18     for i in cities: 19  res.append([i.id, i.atitle]) 20     return JsonResponse({'cities':res}) 21 
22 #得到區 縣
23 def getDistrict(request): 24     district_id = request.GET.get('district_id') 25     cities = AreaInfo.objects.filter(aParent_id=district_id) 26     res = [] 27     for i in cities: 28  res.append([i.id, i.atitle]) 29     return JsonResponse({'district': res})

模型部分：this

 1 # 創建城市自關聯數據庫表
 2 class AreaInfo(models.Model):  3     atitle = models.CharField(max_length=30)  4     aParent = models.ForeignKey('self',null=True,blank=True)  5 
 6     def __str__(self):  7         return self.atitle  8 
 9     class Meta: 10         db_table = 'areas'  # 指定表名稱

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Django實現 省 市 縣 自關聯的下拉級聯

Django實現省市縣自關聯的下拉級聯