Как получить взаимозависимые выпадающие списки в django с помощью Modelform и jquery?

Я новичок в django и jquery. Я работаю над django-based app, где у меня есть 3 drop downs в форме. 1. Кампус 2. Школа 3. Центр

Иерархия - это кампусы, в школах и школах есть центры. Я хочу связать эти выпадающие списки.

Например, у меня есть 3 кампуса, скажем Campus1, Campus2, Campus3. Если я выберу Campus1, мне нужно будет только выбрать школы в campus1 и продолжить это, если я выберу School1, тогда мне нужно будет выбрать центры School1, и все остальные варианты должны быть скрыты.

Я искал в сети и пробовал это http://blog.devinterface.com/2011/02/how-to-implement-two-dropdowns-dependent-on-each -прочее-используя-Джанго-и-JQuery/ но это не работает для меня. Я также проверил это http://www.javascriptkit.com/script/script2/triplecombo.shtml но поскольку я использую ModelForm для создания форм, это не соответствует моим потребностям.

Пожалуйста, помогите мне сделать это.

Спасибо

Ответ 1

Возможно, вам понадобятся следующие технологии:

Пользовательские поля формы Django (в форме модели)
ajax (для получения записей)
simplejson (для отправки json-ответа на ajax)
jquery (для обновления со списков на стороне клиента)

Давайте посмотрим на пример (не проверял это, только с самого начала):

Models.py

from django.db import models

class Campus(models.Model):
    name = models.CharField(max_length=100, choices=choices.CAMPUSES)

    def __unicode__(self):
        return u'%s' % self.name

class School(models.Model):
    name = models.CharField(max_length=100)
    campus = models.ForeignKey(Campus)

    def __unicode__(self):
        return u'%s' % self.name

class Centre(models.Model):
    name = models.CharField(max_length=100)
    school = models.ForeignKey(School)

    def __unicode__(self):
        return u'%s' % self.name

Forms.py

import models
from django import forms

class CenterForm(forms.ModelForm):
    campus = forms.ModelChoiceField(queryset=models.Campus.objects.all())
    school = forms.ModelChoiceField(queryset=models.School.objects.none()) # Need to populate this using jquery
    centre = forms.ModelChoiceField(queryset=models.Centre.objects.none()) # Need to populate this using jquery

    class Meta:
        model = models.Center

        fields = ('campus', 'school', 'centre')

Теперь напишите метод в своих представлениях, который возвращает объект json для школ под кампусом и центров в школе:

Views.py

import models
import simplejson
from django.http import HttpResponse

def get_schools(request, campus_id):
    campus = models.Campus.objects.get(pk=campus_id)
    schools = models.School.objects.filter(campus=campus)
    school_dict = {}
    for school in schools:
        school_dict[school.id] = school.name
    return HttpResponse(simplejson.dumps(school_dict), mimetype="application/json")

def get_centres(request, school_id):
    school = models.School.objects.get(pk=school_id)
    centres = models.Centre.objects.filter(school=school)
    centre_dict = {}
    for centre in centres:
        centre_dict[centre.id] = centre.name
    return HttpResponse(simplejson.dumps(centre_dict), mimetype="application/json")

Теперь напишите метод ajax/jquery для извлечения данных и заполнения элементов select в HTML.

AJAX/Jquery

$(document).ready(function(){
    $('select[name=campus]').change(function(){
        campus_id = $(this).val();
        request_url = '/get_schools/' + campus_id + '/';
        $.ajax({
            url: request_url,
            success: function(data){
                $.each(data, function(index, text){
                    $('select[name=school]').append(
                         $('<option></option>').val(index).html(text)
                     );
                });
            }
        });
        return false;
    })
});

Ответ 2

Вместо того, чтобы повторно изобретать колесо, я бы использовал Django Smart Selects или Автозапуск Django

Я еще не пробовал, но я собираюсь использовать один или оба из них в предстоящем проекте.