<select> 内循环的 Django 模板在选择后呈现值答案

【问题标题】：Django template for loop inside <select> renders values after the select<select> 内循环的 Django 模板在选择后呈现值
【发布时间】：2016-12-05 03:24:50
【问题描述】：

我正在尝试使用 JQuery 小部件 Multiple select 而不是默认值。

如您所见，我正在尝试将选择选项直接呈现到 <select> 标记中，但奇怪的是它是在 </select> 标记之后呈现的。（for循环在这个标签里面，不在后面）

编辑：简单地说，这是在模板中：

<tag> {% for choice in field.choices %}{{ choice }}{%endfor%} </tag>

但 Django 将其呈现为：

<tag></tag>  {% for choice in field.choices %}{{ choice }} {%endfor%}

这是渲染的：

<div class="col-xs-5">
            <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
</select> # options are render after this tag

<option value="97">Slovak</option>
<option value="98">Russian</option>
<option value="99">Magyar</option>
<option value="100">English</option>
<option value="101">Croatian</option>
<option value="102">Spanish</option>
<option value="103">Dutch</option>
<option value="104">Estonian</option>
<option value="105">French</option>
<option value="106">DSADSA</option> etc....

这是模板：

{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% block head %}
    <script type="text/javascript" src="{% static "js/scripts/multiselect.min.js" %}"></script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('#multiselect').multiselect();
        });
    </script>
{% endblock %}
{% block content %}
    <h1>Become a translator</h1>
    <form id="user_form" method="post" action="">
        {% csrf_token %}
        {{ register_as_translator_form | crispy }}
            <button class="accordion" type="submit" name="submit" value="Register">Register</button>
    </form>
    <div class="row">
        <div class="col-xs-5">
            <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
                {% for choice in register_as_translator_form.languages %}
                    {{ choice }}
                {% endfor %}
            </select>
        </div>

        <div class="col-xs-2">
            <button type="button" id="multiselect_rightAll" class="btn btn-block"><i
                    class="glyphicon glyphicon-forward"></i></button>
            <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i
                    class="glyphicon glyphicon-chevron-right"></i></button>
            <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i
                    class="glyphicon glyphicon-chevron-left"></i></button>
            <button type="button" id="multiselect_leftAll" class="btn btn-block"><i
                    class="glyphicon glyphicon-backward"></i></button>
        </div>

        <div class="col-xs-5">
            <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
        </div>
    </div>
{% endblock %}

不幸的是，它呈现如下：

你知道该怎么做吗？

【问题讨论】：

我非常怀疑这是 Django 做的。请查看呈现的 HTML 源代码——不是开发人员工具中解释的 DOM，而是原始的 View Source 输出——并发布实际生成的内容。
@DanielRoseman 可能是 Django（我不是专家，所以我不确定）。正如艾哈迈德在下面的答案中所说。不知道是错误还是什么..但他的回答有效。现在，for 循环正在

标签： django forms django-forms django-templates

【解决方案1】：

如果register_as_translator_form.languages返回字符串列表可能会发生这种情况，试试这个方法：

    <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
        {% for choice in register_as_translator_form.languages %}
            <option value="{{ choice }}">{{ choice }}</option>
        {% endfor %}
    </select>

【讨论】：

谢谢艾哈迈德，这似乎有效。但是有一个小问题。似乎其中一个选择是
@Milano 我不知道register_as_translator_form.languages 返回什么，但是您可以在视图中进行一些过滤，并且只将语言数据传递给您的视图
我想通了，我刚刚把它改成了 for value,text in register_as_translator_form.languages.field.choices and value = "{{ value }}">{{ key}}.. .它的工作原理。谢谢！