Django - 具有多个选择的下拉表单

Question

我需要指导构建一个 django 下拉列表 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 表单/小部件设置是否可以完成这个任务使用自定义代码。

原文由 NickBraunagel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

（是的，这个片段——就像 Djangosnippets 上的许多东西一样——已经过时了；“newforms”甚至在 Django 1.0 版本之前就被重命名为“forms”。）

原文由 Daniel Roseman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 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  } );

原文由 MicroPyramid 发布，翻译遵循 CC BY-SA 3.0 许可协议