Django template for loop inside <select> renders values after the select
<p>I'm trying to use JQuery widget <a href="https://github.com/crlcu/multiselect" rel="nofollow noreferrer">Multiple select</a> instead of default.</p>

<p>As you can see, I'm trying to render select options right into <code>&lt;select&gt;</code> tag but, it's weird that it is being rendered after <code>&lt;/select&gt;</code> tag. (for loop is inside this tag, not after)</p>

<p>EDIT:
Simly, this is in the template: </p>

<pre><code>&lt;tag&gt; {% for choice in field.choices %}{{ choice }}{%endfor%} &lt;/tag&gt; 
</code></pre>

<p>but Django renders it like it was:</p>

<pre><code>&lt;tag&gt;&lt;/tag&gt;  {% for choice in field.choices %}{{ choice }} {%endfor%}
</code></pre>

<p>This is rendered:</p>

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

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

<p>This is the template:</p>

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

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

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

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

<p><strong>Unfortunately, it renders this:</strong>
<a href="https://i.stack.imgur.com/GBObH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GBObH.png" alt="enter image description here"></a></p>

<p>Do you know what to do?</p>