2010-11-01 2 views
2

Я пытаюсь создать раскрывающийся список из 3 столбцов в качестве страны, штата, города.Django - 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) 

ответ

1

Ive реализовали то же самое успешно использовать это: http://elo80ka.wordpress.com/2009/10/14/jquery-plugin-chained-select-lists/

EDIT:
Я не имею код под рукой, но адаптируя из учебника, сначала создать представления, которые возвращает соответствующий 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 

EDIT 2: Для данной схемы вам нужно будет только изменить URL-адреса.

В ваших URLs:

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

вы можете демо это? – Ryan

+0

класс Страна (models.Model): страна = models.CharField (max_length = 20) класса State (models.Model): состояние = models.CharField (max_length = 20) страна = models.ForeignKey (Страна) класс город (models.Model): город = models.CharField (max_length = 20) состояние = models.ForeignKey (State) – Ryan

+0

Я отправил свою дб схему. Я стараюсь, чтобы это было просто – Ryan

0

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

+0

вы можете показать демо? – Ryan

+0

где ваш сайт? – Ryan

0

Вы можете попробовать также без 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> 
Смежные вопросы