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

Posted 2023-02-24

【中文标题】<select> 内循环的 Django 模板在选择后呈现值

【英文标题】：Django template for loop inside <select> renders values after the select

【发布时间】：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 循环正在 中呈现。我做了一些更改，一切正常。

【参考方案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>

【讨论】：

谢谢艾哈迈德，这似乎有效。但是有一个小问题。似乎其中一个选择是 标记或其他东西。我已将

START

您的代码放入 SELECT TAG

STOP

以查看呈现了哪些选择，这就是结果。似乎第一个选项是标签。 ghostbin.com/paste/rx8cx

@Milano 我不知道register_as_translator_form.languages 返回什么，但是您可以在视图中进行一些过滤，并且只将语言数据传递给您的视图

我想通了，我刚刚把它改成了 for value,text in register_as_translator_form.languages.field.choices and value = " value "> key.. .它的工作原理。谢谢！