Django - Land -> Status-> Stadt Dropdown-Liste

Ich habe versucht, erstellen Sie eine 3-Spalten-Dropdown-Liste, wie Land, Bundesland, Stadt.

Die Liste der Status wird angezeigt, basierend auf dem Land ausgewählt ist. und das gleiche passiert Stadt hängt davon ab, welcher Zustand ausgewählt ist.

Meine Datenbank ist wie folgt. Wenn ein Land ausgewählt wird, die dann Staaten zeigt je nach Land. Das gleiche passiert mit Stadt

Mitglied wählt sein Land,Staat und Stadt, die bereits existierte, Land, Staat, Stadt, Datenbanken

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)

InformationsquelleAutor Ryan | 2010-11-01

  1. 1

    Ive implementiert die gleiche Sache, die erfolgreich mit diesem: http://elo80ka.wordpress.com/2009/10/14/jquery-plugin-chained-select-lists/

    EDIT:

    Ich habe den code zur hand, aber eine Anpassung der aus dem tutorial, erstellen Sie zuerst einen Blick auf, gibt die entsprechenden 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:
    Für die dem angegebenen schema entsprechen, müssten Sie nur ändern Sie die urls.

    In Ihren 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')
    ...
)

    In Ihrer Vorlage verwenden, fügen Sie die folgende (oder Sie können erstellen, js-Dateien, und fügen Sie es dem Formular Medien, die eine bessere 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'
  });
});

    Wenn Sie könnte beschreiben Sie Ihre schema für die Tabelle ein wenig, ich könnte besser helfen.

    können Sie demo?
    Klasse Land (- Modelle.Modell): country= Modelle.CharField(max_length=20) Klasse Zustand(nur Modelle.Modell): state=Modelle.CharField(max_length=20) Land = Modelle.ForeignKey(Land) Klasse Stadt (- Modelle.Modell): Stadt=Modelle.CharField(max_length=20) state=Modelle.ForeignKey(Staat)
    Ich habe mein db-schema. Ich versuche es einfach zu halten
    Prüfen, Bearbeiten 2. Ich bevorzuge diese über die oben genannten app, weil es sehr einfach zu implementieren, und sobald Sie vertraut mit ihm bekommen, können Sie es überall in Ihrer Anwendung
    Was ist die URL oben sein sollte? Ich habe /mysite/Land

    InformationsquelleAutor zsquare

  2. 0

    Hatte ich Erfolg mit http://github.com/digi604/django-smart-selects. Dies bedeutet, dass Sie benötigen, stecken Sie alle in Ihrem Land/Staat/Stadt-Daten in der DB, die möglicherweise nicht ideal sein, aber es ist eine Idee.

    können Sie eine demo?
    wo ist dein Standort?

    InformationsquelleAutor Sean W.

  3. 0

    Können Sie versuchen, auch ohne ajax-Aufruf:

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

    InformationsquelleAutor kishan Radadiya

Schreibe einen Kommentar