Django - Pays -> État-> Ville Liste déroulante

J'ai essayé de créer une liste déroulante 3 colonnes comme Pays, État, Ville.Django - Pays -> État-> Ville Liste déroulante

La liste des états sera affichée en fonction du pays sélectionné. et la même chose arrive à la ville dépend de quel État est sélectionné.

Ma base de données est la suivante. Si un pays est sélectionné, les états seront affichés en fonction du pays. Même chose arrive à la ville

Un membre choisira son pays, l'état et la ville d'un existait déjà Pays, État, bases de données de la ville

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)

Source

2010-11-01 Ryan

Ive a mis en œuvre la même chose avec succès en utilisant ceci: http://elo80ka.wordpress.com/2009/10/14/jquery-plugin-chained-select-lists/

EDIT:
Je n'ai pas le code à la main, mais l'adaptation du tutoriel, vous créez d'abord une vue qui retourne le JSON approprié:

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: Pour le schéma donné, vous devez uniquement modifier les URL.

Dans vos 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') 
    ... 
)

Dans votre modèle, vous devez ajouter les éléments suivants (ou vous pouvez créer des fichiers js et l'ajouter aux médias de forme, ce qui est une meilleure option):

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

Si vous pouviez décrire un peu le schéma de votre table, je pourrais vous aider.

Source

2010-11-01 18:30:01 zsquare

pouvez-vous la démo il? – Ryan

Pays de classe (models.Model): pays = models.CharField (max_length = 20) Etat de classe (models.Model): state = models.CharField (max_length = 20) pays = models.ForeignKey (pays) classe ville (models.Model): ville = models.CharField (max_length = 20) state = models.ForeignKey (État) – Ryan

J'ai posté mon schéma db. J'essaie de garder les choses simples – Ryan

J'ai eu du succès avec http://github.com/digi604/django-smart-selects. Cela signifie que vous devez brancher toutes les données de votre pays/état/ville dans la base de données, ce qui n'est peut-être pas idéal, mais c'est une idée.

Source

2010-11-01 22:30:15

pouvez-vous montrer une démo? – Ryan

où est votre site? – Ryan

Vous pouvez également sans appel 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>

Source

2016-08-18 06:25:49

Django - Pays -> État-> Ville Liste déroulante

Répondre

Questions connexes