Django - 國家 - >州 - >城市下拉列表

我一直在嘗試創建一個3列下拉列表作爲國家，州，市。Django - 國家 - >州 - >城市下拉列表

狀態列表將根據選擇的國家/地區顯示。同樣的事情發生在城市取決於哪個國家被選中。

我的數據庫如下。如果選擇一個國家，那麼各州將顯示取決於國家。同樣的事情發生在城市

成員將選擇自己的國家，州和城市從已經存在的國家，省份，城市數據庫

from django.db import models 


class Member(models.Model): 

     residing_country = models.CharField(max_length=50) 
     residing_state = models.CharField(max_length=50) 
     residing_city = models.CharField(max_length=50) 

class Country(models.Model): 

     country= models.CharField(max_length=20) 

class State(models.Model): 

     state=models.CharField(max_length=20) 
     country = models.ForeignKey(Country)  

class City(models.Model): 

     city=models.CharField(max_length=20) 
     state=models.ForeignKey(State)

來源

2010-11-01 Ryan

伊夫實現同樣的事情，成功地利用這個：http://elo80ka.wordpress.com/2009/10/14/jquery-plugin-chained-select-lists/

編輯：
我沒有手頭上的代碼，而是從本教程適應，首先創建一個返回相應的JSON一個觀點：

def filter (request, model_class, field_name): 
    try: 
     kwargs = {smart_str(field_name): request.GET['q']} 
    except KeyError: 
     raise Http404 
    qs = model_class.objects.filter(**kwargs).values('pk', 'name') 
    response = HttpResponse(
     content=dumps(list(qs)), 
     mimetype='application/json' 
    ) 
    return response

編輯2：對於給定的模式，您只需要更改網址。

您網址：

urlpatterns = patterns('', 
    url(r'^locations/filter/state-by-country/$', 'filter', {'model_class': State, 'field_name': 'country'}, name='state_filter') 
    url(r'^locations/filter/city-by-state/$', 'filter', {'model_class': City, 'field_name': 'state'}, name='city_filter') 
    ... 
)

在模板中，您將添加以下（或你可以創建js文件，並將其添加到窗體的媒體，這是一個更好的選擇）：

$(function() { 
    $('#id_state').chainedSelect({ 
    parent: '#id_country', 
    url: 'locations/filter/find-by-country', 
    value: 'id', 
    label: 'name' 
    }); 
}); 

$(function() { 
    $('#id_city').chainedSelect({ 
    parent: '#id_state', 
    url: 'locations/filter/find-by-state', 
    value: 'id', 
    label: 'name' 
    }); 
});

如果你能描述一下你的表格模式，我可以幫助更好。

來源

2010-11-01 18:30:01 zsquare

你可以試玩嗎？ – Ryan 2010-11-01 19:21:00

類國家（models.Model）：國家= models.CharField（MAX_LENGTH = 20）類國家（models.Model）：狀態= models.CharField（MAX_LENGTH = 20）國家= models.ForeignKey（國家）級市（models.Model）：城市= models.CharField（MAX_LENGTH = 20）狀態= models.ForeignKey（州） – Ryan 2010-11-02 05:45:32

我已經張貼了我的數據庫架構。我儘量保持簡單 – Ryan 2010-11-02 05:46:16

我的成功與http://github.com/digi604/django-smart-selects。這意味着您需要將所有國家/州/城市數據插入數據庫中，這可能不太理想，但這是一個想法。

來源

2010-11-01 22:30:15

你能演示一個演示嗎？ – Ryan 2010-11-02 16:02:56

您的網站在哪裏？ – Ryan 2010-11-02 16:47:05

你也可以嘗試沒有Ajax調用：

<html> 
<head> 
<title>Demo by kishan Radadiya</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     // Countries 
     var country_arr = new Array("Select Country","AUSTRALIA","INDIA","NEW ZEALAND","USA","UAE","MAURITIUS"); 

     $.each(country_arr, function (i, item) { 
      $('#country').append($('<option>', { 
       value: i, 
       text : item, 
      }, '</option>')); 
     }); 

     // States 
     var s_a = new Array(); 
     s_a[0]="Select State"; 
     s_a[1]="Select State|QUEENSLAND|VICTORIA"; 
     s_a[2]="Select State|ANDHRAPRADESH|KARNATAKA|TAMILNADU|DELHI|GOA|W-BENGAL|GUJARAT|MADHYAPRADESH|MAHARASHTRA|RAJASTHAN"; 
     s_a[3]="Select State|AUCKLAND"; 
     s_a[4]="Select State|NEWJERSEY|ILLINOIS"; 
     s_a[5]="Select State|DUBAI"; 
     s_a[6]="Select State|MAURITIUS"; 

     // Cities 
     var c_a = new Array(); 
     c_a['QUEENSLAND']="BRISBANE"; 
     c_a['VICTORIA']="MELBOURNE"; 
     c_a['ANDHRAPRADESH']="HYDERABAD"; 
     c_a['KARNATAKA']="BANGLORE"; 
     c_a['TAMILNADU']="CHENNAI"; 
     c_a['DELHI']="DELHI"; 
     c_a['GOA']="GOA"; 
     c_a['W-BENGAL']="KOLKATA"; 
     c_a['GUJARAT']="AHMEDABAD1|AHMEDABAD2|AHMEDABAD3|BARODA|BHAVNAGAR|MEHSANA|RAJKOT|SURAT|UNA"; 
     c_a['MADHYAPRADESH']="INDORE"; 
     c_a['MAHARASHTRA']="MUMBAI|PUNE"; 
     c_a['RAJASTHAN']="ABU"; 
     c_a['AUCKLAND']="AUCKLAND"; 
     c_a['NEWJERSEY']="EDISON"; 
     c_a['ILLINOIS']="CHICAGO"; 
     c_a['MAURITIUS']="MAURITIUS"; 
     c_a['DUBAI']="DUBAI"; 


     $('#country').change(function(){ 
      var c = $(this).val(); 
      var state_arr = s_a[c].split("|"); 
      $('#state').empty(); 
      $('#city').empty(); 
      if(c==0){ 
       $('#state').append($('<option>', { 
        value: '0', 
        text: 'Select State', 
       }, '</option>')); 
      }else { 
       $.each(state_arr, function (i, item_state) { 
        $('#state').append($('<option>', { 
         value: item_state, 
         text: item_state, 
        }, '</option>')); 
       }); 
      } 
      $('#city').append($('<option>', { 
       value: '0', 
       text: 'Select City', 
      }, '</option>')); 
     }); 

     $('#state').change(function(){ 
      var s = $(this).val(); 
      if(s=='Select State'){ 
       $('#city').empty(); 
       $('#city').append($('<option>', { 
        value: '0', 
        text: 'Select City', 
       }, '</option>')); 
      } 
      var city_arr = c_a[s].split("|"); 
      $('#city').empty(); 

      $.each(city_arr, function (j, item_city) { 
       $('#city').append($('<option>', { 
        value: item_city, 
        text: item_city, 
       }, '</option>')); 
      }); 


     }); 
    }); 
</script> 
</head> 
<body> 
<select name="country" id="country"></select> <br> 
<select name="state" id="state"></select> <br> 
<select name="city" id="city"></select> 
</body> 
</html>

來源

2016-08-18 06:25:49

Django - 國家 - >州 - >城市下拉列表

回答

相關問題