Django中模板无法渲染Choices选项问题求助（Materialize）

我使用Django开发项目，已在模型中添加Choices选项及对应字段，该选项在Admin后台可正常显示，但在前端模板中无法渲染。多次检查代码未发现异常，怀疑与Materialize CSS框架有关。已按Materialize文档要求添加.input-field类并初始化select元素，但问题仍未解决。

相关代码 #

Model #

class Grocery(models.Model):
    """
    Model to create a grocery_list
    """
    CATEGORIES = [("groceries", "Groceries"),
                  ("school", "School"),
                  ("hardware", "Hardware"),
                  ("travel", "Travel"),
                  ("gifts", "Gifts"),
                  ("decoration", "Decoration"),
                  ("lifestyle", "Lifestyle"),
                  ("wishlist", "Wishlist")]

    name = models.CharField(max_length=500, default='My grocery list')
    category = models.CharField(max_length=20, choices=CATEGORIES,
                                default='Shopping')

Form #

class GroceryForm(forms.ModelForm):
    """
    Form to create a grocery shopping list
    """
    class Meta:
        model = Grocery
        fields = ['name', 'category', 'shop', 'item']

Template #

{% block title %}Create shopping list{% endblock %} 

{% block content %}

<div class="container row">
  <div class="col s10 m8 push-s1 push-m2">
    <h1 class="center-align">Create a grocery shopping list</h1>
    <div class="divider"></div>
    <div class="input-field section">
      <form method="POST">
        {% csrf_token %} {{ form.media }} {{ form.as_p }}
        <button type="submit" class="waves-effect btn">Create list</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}

JS #

// sidebar initialization
document.addEventListener("DOMContentLoaded", function () {
  let sidenav = document.querySelectorAll(".sidenav");
  M.Sidenav.init(sidenav);
});

// select initialization
document.addEventListener("DOMContentLoaded", function () {
  let elems = document.querySelectorAll("select");
  M.FormSelect.init(elems, options);
});

前端显示异常截图 #

排查及解决方法 #

1. 修正模型默认值错误 #

模型中category字段的默认值'Shopping'不在定义的CATEGORIES选项中，这会导致无效选项生成，Materialize无法正确处理。将默认值改为选项中存在的有效值，比如：

category = models.CharField(max_length=20, choices=CATEGORIES, default='groceries')

2. 调整表单渲染结构 #

form.as_p生成的<p>标签会将select元素和标签分离，破坏Materialize要求的.input-field包裹结构。建议手动渲染每个字段，确保select和label都在.input-field容器内：

{% block content %}
<div class="container row">
  <div class="col s10 m8 push-s1 push-m2">
    <h1 class="center-align">Create a grocery shopping list</h1>
    <div class="divider"></div>
    <form method="POST">
      {% csrf_token %}
      <div class="input-field">
        {{ form.name.label_tag }}
        {{ form.name }}
      </div>
      <div class="input-field">
        {{ form.category.label_tag }}
        {{ form.category }}
      </div>
      <div class="input-field">
        {{ form.shop.label_tag }}
        {{ form.shop }}
      </div>
      <div class="input-field">
        {{ form.item.label_tag }}
        {{ form.item }}
      </div>
      <button type="submit" class="waves-effect btn">Create list</button>
    </form>
  </div>
</div>
{% endblock %}

3. 修复JS初始化问题 #

JS代码中M.FormSelect.init(elems, options)的options变量未定义，会导致初始化失败。若无需额外配置，直接移除第二个参数：

// select initialization
document.addEventListener("DOMContentLoaded", function () {
  let elems = document.querySelectorAll("select");
  M.FormSelect.init(elems);
});

4. 确认Materialize资源加载顺序 #

确保页面正确引入依赖资源，顺序为：

1. Materialize CSS
2. jQuery（Materialize依赖jQuery）
3. Materialize JS

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