Django-国家->州->城市下拉列表
我一直在尝试创建一个3列的下拉列表，如国家、州、城市 州列表将根据选择的国家显示。城市也会发生同样的事情，这取决于选择哪个州 我的数据库如下。如果选择了一个国家，则根据国家显示状态。同样的事情也发生在城市里 成员将从已存在的国家、州和城市数据库中选择其国家、州和城市Django-国家->州->城市下拉列表,django,drop-down-menu,state,country,city,Django,Drop Down Menu,State,Country,City,我一直在尝试创建一个3列的下拉列表，如国家、州、城市 州列表将根据选择的国家显示。城市也会发生同样的事情，这取决于选择哪个州 我的数据库如下。如果选择了一个国家，则根据国家显示状态。同样的事情也发生在城市里 成员将从已存在的国家、州和城市数据库中选择其国家、州和城市 from django.db import models class Member(models.Model): residing_country = models.CharField(max_length=50
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)
我使用以下方法成功地实现了相同的功能： 编辑： 我手头没有代码，但根据本教程，首先创建一个返回相应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
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')
...
)
$(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'
});
});
如果您能稍微描述一下您的表模式，我会帮您做得更好。我在这方面做得很成功。这意味着您需要将所有国家/州/城市数据插入数据库，这可能并不理想，但这是一个好主意。您也可以尝试不使用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>
这是一个非常简单的解决方案，适用于任何希望为django或任何国家->州/省->市网站实现快速链接下拉列表的人，无需维护db html 剧本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//geodata.solutions/includes/countrystatecity.js"></script>
如果您已经在为ajax加载jquery.min.js，则无需再次加载它。只需加载countrystatecity.js。类Countrymodels.Model:country=models.CharFieldmax_length=20类Statemodels.Model:state=models.CharFieldmax_length=20国家=models.ForeignKeyCountry类Citymodels.Model:city=models.CharFieldmax_length=20 state=models.foreignKeystate我已经发布了我的数据库模式。我尽量让它保持简单选中编辑2。与前面提到的应用程序相比，我更喜欢这个应用程序，因为它的实现非常简单，一旦您熟悉了它，就可以在应用程序中的任何地方使用它。上面的URL应该是什么？我有/mysite/countryfrom django.db导入模型类成员模型。模型：居住国=模型。CharFieldmax\u长度=50居住国=模型。CharFieldmax\u长度=50居住城市=模型。CharFieldmax\u长度=50类国家模型。模型：国家=模型。CharFieldmax\u长度=20类国家模型。模型：state=models.CharFieldmax_length=20 country=models.ForeignKeyCountry类Citymodels.Model:city=models.CharFieldmax_length=20 state=models.foreignKeyStates按预期工作。干得好
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//geodata.solutions/includes/countrystatecity.js"></script>