我一直在尝试创建一个 3 列下拉列表作为国家、州、城市。
州列表将根据选择的国家/地区显示。同样的事情发生在城市取决于选择哪个州。
我的数据库如下。如果选择了一个国家，则州将根据国家/地区显示。同样的事情发生在城市
成员将从已经存在的国家、州、城市数据库中选择他的国家、州和城市
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)
最佳答案
您也可以尝试不使用 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 - Country -> State-> City 下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4071630/