Django template for loop inside <select> renders values after the select - django

Question

I'm trying to use JQuery widget Multiple select instead of default.
As you can see, I'm trying to render select options right into <select> tag but, it's weird that it is being rendered after </select> tag. (for loop is inside this tag, not after)
EDIT:
Simly, this is in the template:
<tag> {% for choice in field.choices %}{{ choice }}{%endfor%} </tag>
but Django renders it like it was:
<tag></tag> {% for choice in field.choices %}{{ choice }} {%endfor%}
This is rendered:
<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....
This is the template:
{% 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 %}
Unfortunately, it renders this:
Do you know what to do?

Answer 1

That could happen if register_as_translator_form.languages return string list, try this way:
<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>