Джанго - Страна -> Штат-> Город Раскрывающийся список - PullRequest
Новая
       31

Джанго - Страна -> Штат-> Город Раскрывающийся список

2 голосов
/ 01 ноября 2010

Я пытался создать раскрывающийся список из 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)

Ответы [ 3 ]

1 голос
/ 01 ноября 2010

Я успешно реализовал то же самое, используя это: 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-адреса.

В ваших 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'
  });
});

Если бы вы могли немного описать вашу схему таблицы, я мог бы помочь лучше.

0 голосов
/ 18 августа 2016

Вы можете попробовать также без вызова 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>
0 голосов
/ 02 ноября 2010

У меня был успех с http://github.com/digi604/django-smart-selects. Это будет означать, что вам нужно подключить все данные вашей страны / штата / города в БД, что может быть не идеально, но это идея.

...