如何在Django模板中渲染带多选字段的自定义Bootstrap表单？

1. 调整表单类，开启多选功能 #

你的原表单中category是单选的ModelChoiceField，要支持多选需要改为ModelMultipleChoiceField，同时可以提前给组件加上Bootstrap的样式类：

from django import forms
from .models import ClubCategories

class CreateClubForm(forms.Form):
    name = forms.CharField(max_length=127)
    category = forms.ModelMultipleChoiceField(
        queryset=ClubCategories.objects.all(),
        # 指定多选下拉组件并添加Bootstrap的form-control类
        widget=forms.SelectMultiple(attrs={'class': 'form-control'}),
        required=True  # 根据业务需求设置是否必填
    )

2. 模板中手动渲染Bootstrap样式表单 #

放弃默认的{{ form }}自动渲染，手动构建Bootstrap表单结构，逐个渲染字段：

<form method="post">
  {% csrf_token %}
  
  <!-- 渲染名称字段 -->
  <div class="mb-3">
    <label for="{{ form.name.id_for_label }}" class="form-label">俱乐部名称</label>
    {{ form.name }}
    {% if form.name.errors %}
      <div class="invalid-feedback d-block">
        {% for error in form.name.errors %}{{ error }}{% endfor %}
      </div>
    {% endif %}
  </div>

  <!-- 渲染多选分类字段 -->
  <div class="mb-3">
    <label for="{{ form.category.id_for_label }}" class="form-label">俱乐部分类（可多选）</label>
    <!-- 直接使用表单字段，已自带form-control类 -->
    {{ form.category }}
    {% if form.category.errors %}
      <div class="invalid-feedback d-block">
        {% for error in form.category.errors %}{{ error }}{% endfor %}
      </div>
    {% endif %}
  </div>

  <button type="submit" class="btn btn-primary">提交</button>
</form>

如果需要完全自定义选项渲染（比如给特定选项加样式），可以手动循环生成选项：

<div class="mb-3">
  <label class="form-label">俱乐部分类（可多选）</label>
  <select multiple class="form-control" id="{{ form.category.id_for_label }}" name="{{ form.category.name }}">
    {% for choice in form.category.field.choices %}
      <option value="{{ choice.0 }}" 
              {% if choice.0 in form.category.value or choice.0 == form.category.value %}selected{% endif %}>
        {{ choice.1 }}
      </option>
    {% endfor %}
  </select>
  {% if form.category.errors %}
    <div class="invalid-feedback d-block">
      {% for error in form.category.errors %}{{ error }}{% endfor %}
    </div>
  {% endif %}
</div>

3. 可选：优化多选交互体验 #

如果需要更友好的多选界面（比如带搜索、标签化选择），可以使用Bootstrap Select这类第三方插件，操作如下：

• 下载插件的CSS和JS文件到项目静态资源目录
• 在模板中引入静态文件（需在jQuery和Bootstrap之后加载）
• 修改表单widget的属性：

category = forms.ModelMultipleChoiceField(
    queryset=ClubCategories.objects.all(),
    widget=forms.SelectMultiple(attrs={
        'class': 'form-control selectpicker',
        'data-live-search': 'true',  # 开启搜索功能
        'data-max-options': '3'      # 可选：限制最多选择数量
    }),
    required=True
)

模板中引入静态资源（根据你的静态文件路径调整）：

{% load static %}
<link rel="stylesheet" href="{% static 'css/bootstrap-select.min.css' %}">
<script src="{% static 'js/bootstrap-select.min.js' %}"></script>

内容的提问来源于stack exchange，提问作者PyWithPey