Django / jQuery级联选择框？ [英] Django/jQuery Cascading Select Boxes?

问题描述

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

我可以在页面上设置状态字段为空加载，然后用一些jQuery填充它，但是如果有表单错误，它将无法记住你选择了哪个状态。我也很确定它会抛出一个验证错误，因为你的选择不是Python面上列出的一个。

所以如何解决这些问题？

解决方案

您可以设置一个隐藏的字段来具有真正的状态值，然后使用jQuery创建< select> 列表，并在 .select（）上将其值复制到隐藏字段。然后，在页面加载时，您的jQuery代码可以获取隐藏字段的值，并在填充后，使用它选择< select> 元素中的正确项。

这里的关键概念是，状态弹出菜单是一个完全在jQuery中创建的小说，而不是Django表单的一部分。这让你完全控制它，同时让所有其他字段正常工作。

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

在视图中：

  context = {'state' ：无，'countries'：Country.objects.all（）。order_by（'name'）} 
如果request中的'country'.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：
上下文['states'] = [] 
上下文['国家'] =无
＃...设置上下文的其余部分... 
返回render_to_response（addressform.html，上下文）
  

然后在模板中：

 < select name = countryid =select_country> 
 {％在国家/地区％c 
< option value ={{c.val}}{％ifequal c.val country％} selected =selected{％endifequal％}> ; {{c.name}}< / option> 
 {％endfor％} 
< / select> 
 
< select name =stateid =select_state> 
 {％s状态％} 
< option value ={{s.val}}{％ifequal s.val state％} selected =selected{％endifequal％}> ; {{s.name}}< / option> 
 {％endfor％} 
< / select> 
  

当国家/地区更改时，您还需要通常的JavaScript来重新载入州选择器。 p>

我没有测试过，所以可能有一些漏洞，但是应该可以得到这个想法。

所以你的选择是：

• 在Django表单中使用一个隐藏的字段来获得真正的价值，通过AJAX或


• Ditch Django的表单，然后自己初始化菜单。


• 创建一个自定义Django表单小部件，我没有做，因此不会发表评论。我不知道这是否可行，但是看起来您需要一对在 MultiWidget 中选择 ，后者在常规文档中没有记录，所以你必须阅读来源。

I want to build a Country/State selector. First you choose a country, and the States for that country are displayed in the 2nd select box. Doing that in PHP and jQuery is fairly easy, but I find Django forms to be a bit restrictive in that sense.

I could set the State field to be empty on page load, and then populate it with some jQuery, but then if there are form errors it won't be able to "remember" what State you had selected. I'm also pretty sure that it will throw a validation error because your choice wasn't one of the ones listed in the form on the Python side of things.

So how do I get around these problems?

解决方案

You could set a hidden field to have the real "state" value, then use jQuery to create the <select> list and, on .select(), copy its value to the hidden field. Then, on page load, your jQuery code can fetch the hidden field's value and use it to select the right item in the <select> element after it's populated.

The key concept here is that the State popup menu is a fiction created entirely in jQuery and not part of the Django form. This gives you full control over it, while letting all the other fields work normally.

EDIT: There's another way to do it, but it doesn't use Django's form classes.

In the view:

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)

Then in the template:

<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>

You'll also need the usual JavaScript for reloading the states selector when the country is changed.

I haven't tested this, so there are probably a couple holes in it, but it should get the idea across.

So your choices are:

• Use a hidden field in the Django form for the real value and have the select menus created client-side via AJAX, or
• Ditch Django's Form stuff and initialize the menus yourself.
• Create a custom Django form widget, which I haven't done and thus will not comment on. I have no idea if this is doable, but it looks like you'll need a couple Selects in a MultiWidget, the latter being undocumented in the regular docs, so you'll have to read the source.

这篇关于Django / jQuery级联选择框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！