Django / jQuery级联选择框？

Question

我想建立一个国家/州选择器。首先，您选择一个国家，然后在第二个选择框中显示该国家的州。在PHP和jQuery中执行此操作相当容易，但我发现Django表单在某种意义上具有一定的局限性。

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

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

Answer 1

你可以将一个隐藏字段设置为具有真正的“状态”值，然后使用jQuery创建<select>列表，然后.select()将其值复制到该隐藏字段中。然后，在页面加载时，你的jQuery代码可以获取隐藏字段的值，并在<select>填充后使用它在元素中选择合适的项目。

这里的关键概念是“状态”弹出菜单是一种完全使用jQuery创建的小说，而不是Django形式的一部分。这使你可以完全控制它，同时让所有其他字段正常工作。

编辑：还有另一种方法，但是它不使用Django的表单类。

在视图中：

context = {'state': None, 'countries': Country.objects.all().order_by('name')}
if 'country' in request.POST:
    context['country'] = request.POST['country']
    context['states'] = State.objects.filter(
        country=context['country']).order_by('name')
    if 'state' in request.POST:
        context['state'] = request.POST['state']
else:
    context['states'] = []
    context['country'] = None
# ...Set the rest of the Context here...
return render_to_response("addressform.html", context)

然后在模板中：

<select name="country" id="select_country">
    {% for c in countries %}
    <option value="{{ c.val }}"{% ifequal c.val country %} selected="selected"{% endifequal %}>{{ c.name }}</option>
    {% endfor %}
</select>

<select name="state" id="select_state">
    {% for s in states %}
    <option value="{{ s.val }}"{% ifequal s.val state %} selected="selected"{% endifequal %}>{{ s.name }}</option>
    {% endfor %}
</select>

你还需要通常的JavaScript，以便在更改国家/地区后重新加载州选择器。

我尚未对此进行测试，因此其中可能有几个漏洞，但应该可以理解。

因此，你的选择是：

• 使用Django表单中的隐藏字段获取实际值，并通过AJAX在客户端创建选择菜单，或者
• 抛弃Django的Form内容并自己初始化菜单。
• 创建一个自定义Django表单窗口小部件，该窗口小部件尚未完成，因此将不对其进行评论。我不知道这是否可行，但看来你需要Select在中添加MultiWidget，而常规文档中未记录后者，因此你必须阅读源代码。