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

Question

我需要制作一个django 下拉列表 <div class="myDiv"></div>字段的指南，我可以在其中选择多个选项。我需要在表单的forms.Form字段中选择多个位置。

提交后，表单需要返回office个所选办事处（例如list或["New York", "Los Angeles"]）。返回["Austin"]也是可以接受的。

我现在能做的最好的事情是为tuple建立一个multipleChoiceField，其中包含以下内容：

office

导致此表​​单字段布局：

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

我发现了这个djangosnippet但是（1）有些人提到它看起来过时了（我无法确认），（2）我首先要检查内置的django表单/窗口小部件设置可以在使用自定义代码之前完成此任务。

Answer 1

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

你可能想要使用某种JS小部件 - Select2是一个很受欢迎的小部件。有两个Django项目 - django-select2，django-easy-select - 旨在简化将其集成到您的表单中;我没有任何经验。

（是的，那个片段 - 就像Djangosnippets上的许多东西一样 - 大大过时了;“newforms”在Django 1.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  } );

Answer 3

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

<强> 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 %}
(...)

Answer 4

这很晚了，但希望对别人有帮助。

您还可以结合使用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小部件