django-templates - 无法在我的 html 模板中获取数据表单 selectpicker 类

Question

对不起我的英语，不是我的母语。我对 html 很陌生。我正在使用 django + bootstrap。除了复制主要的 javascript，我没有使用 php 或 javascript。我想要的是：

在页面左侧选择好看的选项。在页面的右侧会有一些……不知道是什么。现在有一些文字。
将带有 request.method="POST" 的选定选项发送到完全相同的页面，并在右侧显示有关选定项目的信息（实际上，现在，出现带有一个 CharField 的表单，我想在其中显示选定项目的名称）。顺便说一句，页面右侧的旧文本仅使用“GET”方法出现。

我想出了如何使页面看起来正是我想要的。但是表单不发送数据。我很确定问题是我对“selectpicker”类的理解不好。嗯，这就是我的 html 模板。

{% extends 'mainpages/layout.html' %}

{% block head %} 

{% endblock %}

{% block title %} Calculator {% endblock %}

{% block heading %} Calculator {% endblock%}

{% block content %}

<div class="row">
    <div class="col-6 col-md-6">
        <form class="row ml-5" action="{% url 'eval' %}" method="POST">
            {% csrf_token %}
            <label class="input-group-text" for="inputGroupSelect01">Select with Search</label>
            <select class="selectpicker" data-style="btn-primary" data-width="auto" multiple data-selected-text-format="count > 2" data-live-search="true">
                {% for table_name, els in el_of_tables.items %}
                <optgroup label="{{table_name}}">
                    {% for el in els %}
                        <option> {{el}}</option>
                    {% endfor %}
                {% endfor %}
            </select>
            <button class="btn btn-primary" type="submit">Add to menu</button>
        </form>
    </div>
    <div class="col-6 col-md-6">
        {% if request.method == 'POST' %}
            {{form}}
        {% else %}
            <p>Тут будут результаты выбора продуктов, сумма их калорий, белков, жиров и углеводов.</p>
        {% endif %}
    </div>
</div>

  
{% endblock %}

{% block script %}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

{% endblock %}

以及我的基本 html 中的一些强制性（用于理解我所有包含的脚本）字符串：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  {% block head %} {% endblock %}
    <title>{% block title %}{% endblock %}</title>
  <style>
    #Log_in_card, #User_card:hover {
      opacity: 1.0;
      filter: alpha(opacity=100);/* For IE8 and earlier */
    }

    #Log_in_card, #User_card {
      opacity: 0.5;
      filter: alpha(opacity=50);/* For IE8 and earlier */
      position: fixed;
      bottom: 0px;
      right: 20px;
    }
  </style> 
</head>
<body>
...
<!-- END OF BASE HTML TEMPLATE -->
  <!-- BOOTSTRAP -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>
  <!-- END OF BOOTSTRAP -->
  <!-- MODAL SHOWING SCRIPT -->
  <script>
    $(document).ready(function () {
      $('#staticBackdrop').modal('show');
    })
  </script>
  <!-- END OF MODAL SHOWING SCRIPT -->
  {% block script %} {% endblock %}
</body>

</html>

也许我没有包含一些强制性脚本？

score 0 · Accepted Answer

嗯，这是某种答案：

我添加了这个脚本：

<script>
$('.selectpicker').on('change', function(){
    var selected = []
    selected = $('.selectpicker').val()
    console.log(selected); //Get the multiple values selected in an array
    console.log(selected.length); //Length of the array
    document.getElementById('result of select').innerHTML=selected;
});
</script>

我删除了模板中对 request.method 的所有引用。添加属性：id='result of select' 到
页面右侧的标签。因此，有了这个 javascript，我的
标签会更新我所做的每个选择。我什至不需要表格来确认我选择的对象。剩下的唯一一件事 - 为我的屏幕右侧部分设置样式。这是我的最终模板代码：

{% extends 'mainpages/layout.html' %}

{% block title %} Calculator {% endblock %}

{% block heading %} Calculator {% endblock%}

{% block content %}

<div class="row">
    <div class="col-6 col-md-6">
        <div class="row ml-3">
            <label class="input-group-text" style="width: fit-content;" for="inputGroupSelect01">Select with Search</label>
            <select class="selectpicker" id="sel1" name="food" data-style="btn-primary" data-width="auto" multiple data-selected-text-format="count > 2" data-live-search="true" data-actions-box="true">
                {% for table_name, els in el_of_tables.items %}
                <optgroup label="{{table_name}}">
                    {% for el in els %}
                        <option> {{el}}</option>
                    {% endfor %}
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="col-6 col-md-6">
        <p id="result of select" style="color: brown;">Тут будут результаты выбора продуктов, сумма их калорий, белков, жиров и углеводов.</p>
    </div>
</div>

  
{% endblock %}

{% block script %}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<script>
$('.selectpicker').on('change', function(){
    var selected = []
    selected = $('.selectpicker').val()
    console.log(selected); //Get the multiple values selected in an array
    console.log(selected.length); //Length of the array
    document.getElementById('result of select').innerHTML=selected;
});
</script>

{% endblock %}

好处是显而易见的——你可以更新页面，甚至不用刷新页面。这是考虑使用 javascript 的一大优势。但我真的是新手和 django+html+javascript ......好吧，没有人说这会很容易。

django-templates - 无法在我的 html 模板中获取数据表单 selectpicker 类

1 回答 1

Related

Reference