一尘不染

Django / jQuery级联选择框?

django

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

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

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


阅读 1018

收藏
2020-03-27

共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,而常规文档中未记录后者,因此你必须阅读源代码。
2020-03-27