Фильтрация выпадающих списков

Хочу рассказать про одну штучку которую недавно пришлось применять.

В двух словах скажу о чем пойдет речь. Есть два выпадающих списка (select), необходимо сделать так чтобы второй список содержал варианты выбора которые относятся к тому что выбрано в первом списке.

Например первый список у нас  будет содержать название марок автомобилей. А второй - модели автомобилей.

Форма

class AutoForm(forms.ModelForm):
    car = forms.ModelChoiceField(queryset=Car.objects.all())
    model = forms.ModelChoiceField(queryset=Model.objects.all())
    json = forms.CharField(max_length=1000, widget=forms.HiddenInput())

    class Meta:
            model = Auto
            fields = ['car','model', 'description']

    def __init__(self, *args, **kwargs):
            super(AutoForm, self).__init__(*args, **kwargs)
            models = {}
            for car in Car.objects.all():
            models[car.id] = [(a.id, a.name) for a in Model.objects.filter(car=car)]
            json = simplejson.dumps(models)
            self.fields['json'].widget = forms.HiddenInput(attrs={'value':json})

Значит что мы здесь делаем.

Создаем класс формы и определяем поля котрые буду у нес выпадающими списками,

class AutoForm(forms.ModelForm):
    car = forms.ModelChoiceField(queryset=Car.objects.all())
    model = forms.ModelChoiceField(queryset=Model.objects.all())

Описиваем поле куда будет ложиться строка данных в json формате

json = forms.CharField(max_length=1000, widget=forms.HiddenInput())

Переписываем метод инициализации класса чтобы он атоматически заполнял поле строкой данных в json формате

def __init__(self, *args, **kwargs):
    super(AutoForm, self).__init__(*args, **kwargs)
    models = {}
    for car in Car.objects.all():
        models[car.id] = [(a.id, a.name) for a in Model.objects.filter(car=car)]
    json = simplejson.dumps(models)
    self.fields['json'].widget = forms.HiddenInput(attrs={'value':json})

Далее передаем форму в темплейт.

И в темплейте подключаем все необходимые файлики и настраюем работу скрипта фильрации,

<script type="text/javascript" src="/static/js/filter.js"></script>
<script src="/static/js/json_sans_eval.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
    $(document).ready(function(){
        jfilter({
            source : '#cars',
            target : '#models',
            json : '#json'});
        })
--></script>

Проверям все ли работает как нужно !!!

Пример

Cars:

Models:

Скачать

JSON parser json_sans_eval.js

jFilter function jfilter.js

Опубликовано в категории IT с тегами

Отзывов: 1


auraz ответил в Wednesday 23 September 2009

Спасибо!!! отлично все работает, есть маленькая опечатка: /filter.js" -> /jfilter.js


Оставить комментрий