Question

我一直在尝试创建一个3列下拉列表，分别为Country，State，City。

将根据选择的国家/地区显示州名单。同样的事情发生在城市取决于选择哪个州。

我的数据库如下。如果选择了某个国家/地区，则会根据国家/地区显示州。同样的事情发生在城市

会员将从已存在的国家，州，市数据库中选择他的国家，州和城市

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)

Answer 1

我已成功使用此功能实现了同样的功能：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'
  });
});

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

Answer 2

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

Answer 3

你可以在没有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>

Answer 4

对于希望为国家 --> 州/省 --> 城市实施 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。

Django - 国家 - ＆gt;状态 - ＆GT;城市下拉列表

4 个答案: