Django - Country -> State-> City 下拉列表答案

【问题标题】：Django - Country -> State-> City Dropdown listDjango - Country -> State-> City 下拉列表
【发布时间】：2010-11-01 17:53:56
【问题描述】：

我一直在尝试创建一个包含国家、州、城市的 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)

【问题讨论】：

标签： django drop-down-menu state country city

【解决方案1】：

您也可以尝试不使用 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>

【讨论】：

按预期工作。干得好。

【解决方案2】：

对于任何希望为国家 --> 州/省 --> 城市实施 django（或任何网站）的快速链接下拉列表的人来说，这是一个非常简单的解决方案，不需要您维护数据库。

https://geodata.solutions/

html

            <div class="card-body text-center">
                <select name="country" class="countries" id="countryId">
                    <option value="">Select Country</option>
                </select>
                <select name="state" class="states" id="stateId">
                    <option value="">Select State</option>
                </select>
                <select name="city" class="cities" id="cityId">
                    <option value="">Select City</option>
                </select>
            </div>

脚本

<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。

【讨论】：

这是付费的吗？它会永远可用
我喜欢这个解决方案，但是上一篇博文（2017 年）说：“我已经决定，至少目前，向任何想要在没有身份验证的情况下使用它的人开放 API。 "不是很让人放心...
我得到的最简单的解决方案

【解决方案3】：

我已经使用这个成功实现了同样的事情：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：对于给定的架构，您只需要更改 url。

在您的网址中：

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'
  });
});

如果您能稍微描述一下您的表架构，我可以提供更好的帮助。

【讨论】：

class Country(models.Model): country= models.CharField(max_length=20) class State(models.Model): state=models.CharField(max_length=20) country = models.ForeignKey( Country) 类 City(models.Model): city=models.CharField(max_length=20) state=models.ForeignKey(State)
我已经发布了我的数据库架构。我尽量保持简单
Check Edit 2. 我更喜欢这个而不是前面提到的应用，因为它实现起来非常简单，一旦你熟悉了它，你就可以在应用程序的任何地方使用它
上面的网址应该是什么？我有 /mysite/country
从 django.db 导入模型类成员（models.Model）：residing_country = models.CharField（max_length=50）residing_state = models.CharField（max_length=50）residing_city = models.CharField（max_length= 50) 类 Country(models.Model): country= models.CharField(max_length=20) 类 State(models.Model): state=models.CharField(max_length=20) country = models.ForeignKey(Country) 类 City(models .Model): city=models.CharField(max_length=20) state=models.ForeignKey(State)

【解决方案4】：

我在http://github.com/digi604/django-smart-selects 上取得了成功。这意味着您需要将所有国家/州/城市数据插入数据库，这可能并不理想，但这是一个想法。

【讨论】：