如何防止CSS标题在Django表单中出现下拉列表

2024-05-20 14:17:32 发布

您现在位置：Python中文网/ 问答频道 /正文
5141 3

您好，我正在使用modelforms。我的一个条目是ChoiceField，当我在name.html文件（表单页面的html文件）中有CSS头时，页面不会显示下拉列表。当我在name.html中删除此标题时，将显示下拉列表。有人能解释发生了什么事吗

name.html

{% extends 'fitness/header.html' %}

{% block content %}
    <form method="post">
        {% csrf_token %}
        {{form.as_p}}
        <input type="submit" value="Submit">
    </form>

{% endblock %}

header.html

<head>
    {% load static %}
    <!-- Prism CSS -->
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</head>


<body>

  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Gainz.com</a>    <!––    Need to adjust this logo           ––>
      <ul id="nav-mobile" class="right 

      hide-on-med-and-down">


        {% if user.is_authenticated %}

          <li><a href="/profile">profile</a></li>
          <li><a href="/logout">logout</a></li>
          <li><a href="/dashboard">dashboard</a></li>
          <li><a href="/feed">feed</a></li>
          <li><a href="/forum">forum</a></li>
          <li><a href="/manual">manual entry</a></li>


        {% else %}

          <li><a href="/">Home</a></li>
          <li><a href="/feed">feed</a></li>
          <li><a href="/login">login</a></li>
          <li><a href="/register">register</a></li>

        {% endif %}

      </ul>
    </div>
  </nav>


  {% block content %}

  {% endblock %}


</body>




<!-- Prism JS -->
<script src="{% static "tinymce/js/prism.js" %}"></script>

Tags： andnameformcomhtmlfeedjsscript
1条回答
网友
1楼 · 发布于 2024-05-20 14:17:32

确保将其添加到页面顶部：

<!DOCTYPE HTML> //always include this at the top of the page of your base file
<html>

脚本始终位于页面底部的结束</body>标记之前：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="{% static "tinymce/js/prism.js" %}"></script>
</body>
</html>

这通常是使用footer.html模板使用{% include 'footer.html' %}呈现的

我添加了<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>jquery脚本，因为它看起来像cloudfare materialize脚本需要它（尽管我不确定）。无论如何，您应该在所有html文件上使用jQuery！；-）

另外，我不确定这是否能解决您的问题，但通常最好的做法是确保所有元素都有结束标记（如果它们需要）。您的name.html（或其他地方）上可能有一个随机的<div>标记，导致意外错误

相关问题 更多 >

    编程相关推荐