Django - 具有多项选择的下拉表单答案

【问题标题】：Django - dropdown form with multiple selectDjango - 具有多项选择的下拉表单
【发布时间】：2017-01-27 04:17:25
【问题描述】：

我需要指导构建一个 django dropdown forms.Form 字段，我可以在其中选择多个选项。我需要在表单的office 字段中选择多个位置。

提交时，表单需要返回所选办公室的list（例如["New York", "Los Angeles"] 或["Austin"]）。返回tuple 也是可以接受的。

我现在能做的最好的事情是为office 构建一个multipleChoiceField，并使用以下内容：

from django import forms

class my_Form(forms.Form):

    OPTIONS = [
        ("0", "*ALL"),
        ("1", "New York"),
        ("2", "Los Angeles"),
        ]

    office = forms.MultipleChoiceField(
            choices=OPTIONS,
            initial='0',
            widget=forms.SelectMultiple(),
            required=True,
            label='Office',
        )

导致这种表单域布局：

但是，我希望这个字段是一个下拉列表，以减少页面上的空间。

我发现了这个djangosnippet，但是（1）一些人提到它似乎已经过时（我无法确认），并且（2）我首先想检查一个内置的 django 表单/小部件设置可以在使用自定义代码之前完成此任务。

【问题讨论】：

标签： python django forms

【解决方案1】：

这已经晚了，但希望它可以帮助别人。

您也可以将 django forms 和 select2 小部件 Select2MultipleWidget 组合使用，以使其看起来更干净。

class YourCreateForm(forms.ModelForm):
     CHOICES = (("address1","address1"), ("address2","address2"))
     address=forms.MultipleChoiceField(choices=CHOICES,widget=Select2MultipleWidget)

     class Meta:
         model = YourModel
         fields = ("field1","address",)

不要忘记安装和导入 django select2 小部件

【讨论】：

NameError：未定义名称“Select2MultipleWidget”。我收到这个错误。我已经安装了“django-select2”并尝试实施您的解决方案。你能帮我看看我哪里做错了吗？
嗨 Singh -- 您是否导入了小部件本身？ from django_select2.forms import Select2MultipleWidget
是的，@codebender。我实现了多选复选框，它对我有用。

【解决方案2】：

正如我所说的in a similar question，一个建议是使用带有 Python 的 Bootstrap。

forms.py

(...)
class yourForm(forms.Form):
    options = forms.MultipleChoiceField(
    choices=OPTIONS, widget=forms.CheckboxSelectMultiple(),
    label="myLabel", required=True, error_messages={'required': 'myRequiredMessage'})

view.py

def anything(...):
    (...)
    form = yourForm( )
    (...)
    return render(request, "myPage.html", {'form': form})

myPage.html

(...)
{% csrf_token %}
    {% for field in form %}
        <div class="col-md-12 dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{{ field.label_tag }}
                <span class="caret"></span>
            </button>
            <div class="dropdown-menu">
                <div><a href="#">{{ field }}</a></div>
            </div>
        </div>
    {% endfor %}
(...)

【讨论】：

这是否会使 Django 对其他人的表单验证无效？如果它对其他人没有帮助，那么我知道我的代码有问题！

【解决方案3】：

您可以使用 Django select2 选择多个选项。在您各自的 HTML 文件中包含以下代码。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

<select class="select_field_class" multiple="multiple" name="option" id="option">
      <option value="">Enter the option</option>
      {% for option in options %}
         <option value="{{ option.id }}">{{ option.name }}</option>
      {% endfor %}
</select>

$('.select_field_class').select2( { placeholder: "Select here", maximumSelectionSize: 100  } );

【讨论】：

如何根据选择添加'selected'属性
"$('.select_field_class').select2( { placeholder: "选择这里", maximumSelectionSize: 100 } );" - 这是去哪里？只是漂浮在那里看起来不正确，并且在我复制和粘贴时不适用于我的实现。

【解决方案4】：

“下拉”框不支持 HTML 中的多选；浏览器将始终将其呈现为图像显示的平面框。

您可能想要使用某种 JS 小部件 - Select2 是一种流行的小部件。有几个 Django 项目——django-select2、django-easy-select——旨在简化将其集成到您的表单中；我对他们中的任何一个都没有经验。

（是的，sn-p - 就像 Djangosn-ps 上的许多东西一样 - 已经过时了；甚至在 Django 1.0 版本之前，“newforms”就被重命名为“forms”。）

【讨论】：