Django/jQuery 级联选择框？

Question

我想构建一个国家/州选择器。首先，您选择一个国家/地区，该国家/地区的州/省/自治区/直辖市/自治区将显示在第二个选择框中。在 PHP 和 jQuery 中做到这一点相当容易，但我发现 Django 表单在这个意义上有点限制。

我可以在页面加载时将“状态”字段设置为空，然后用一些 jQuery 填充它，但是如果存在表单错误，它将无法“记住”您选择的状态。我也非常确定它会抛出验证错误，因为您的选择不是 Python 方面表单中列出的选项之一。

那么我该如何解决这些问题呢？

Answer 1

这是我的解决方案。它使用未记录的 Form 方法 _raw_value() 来查看请求的数据。这适用于也有前缀的表单。

class CascadeForm(forms.Form):
    parent=forms.ModelChoiceField(Parent.objects.all())
    child=forms.ModelChoiceField(Child.objects.none())

    def __init__(self, *args, **kwargs):
        forms.Form.__init__(self, *args, **kwargs)
        parents=Parent.objects.all()
        if len(parents)==1:
            self.fields['parent'].initial=parents[0].pk

        parent_id=self.fields['parent'].initial or self.initial.get('parent') \
                  or self._raw_value('parent')
        if parent_id:
            # parent is known. Now I can display the matching children.
            children=Child.objects.filter(parent__id=parent_id)
            self.fields['children'].queryset=children
            if len(children)==1:
                self.fields['children'].initial=children[0].pk

jquery 代码:

function json_to_select(url, select_selector) {
/*
 Fill a select input field with data from a getJSON call
 Inspired by: http://stackoverflow.com/questions/1388302/create-option-on-the-fly-with-jquery
*/
    $.getJSON(url, function(data) {
    var opt=$(select_selector);
    var old_val=opt.val();
        opt.html('');
        $.each(data, function () {
            opt.append($('<option/>').val(this.id).text(this.value));
        });
        opt.val(old_val);
        opt.change();
    })
}


   $(function(){
     $('#id_parent').change(function(){
       json_to_select('PATH_TO/parent-to-children/?parent=' + $(this).val(), '#id_child');
     })  
    });

回调代码，返回JSON:

def parent_to_children(request):
    parent=request.GET.get('parent')
    ret=[]
    if parent:
        for children in Child.objects.filter(parent__id=parent):
            ret.append(dict(id=child.id, value=unicode(child)))
    if len(ret)!=1:
        ret.insert(0, dict(id='', value='---'))
    return django.http.HttpResponse(simplejson.dumps(ret), 
              content_type='application/json')