Представление динамического поля двойного списка с помощью django

У меня есть двойной динамический список в форме django, я использую jquery... это адаптация этого плагина:

https://www.jqueryscript.net/form/Dual-List-Box-Multi-Selection.html

Это работает, когда я пытаюсь передать элемент из левого блока в другой.

enter image description here

Когда я отправляю форму, если я печатаю переменную формы, для второго поля я получаю ошибку:

<tr><th><label for="id_selected_stations">Selected stations:</label></th><td><ul 
class="errorlist"><li>Scegli un&#x27;opzione valida. 22 non è tra quelle disponibili. 
</li></ul><select name="selected_stations" required id="id_selected_stations" multiple>

Неправильно ли выбран тип поля? Когда я отправляю форму, мне нужно получить только данные правого поля (выбранные пользователем опции). Вот мой код:

forms.py

from django import forms
from station.models import Station

station_all=Station.objects.all()

class VdlForm(forms.Form):
    vdl_name = forms.CharField(label='nome virtual data logger', max_length=20,
                                 widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': 'nome vdl'}))
    stations = forms.ModelMultipleChoiceField(queryset=station_all)
    selected_stations = forms.ModelMultipleChoiceField(queryset=Station.objects.none())

views.py

from django.http import HttpResponseRedirect
from django.shortcuts import render, redirect
from .forms import VdlForm


def new_vdl(request):
    template_name = 'vdl.html'
    heading_message = 'Add a new vdl'

    if request.method == 'POST':
        form = VdlForm(request.POST or None)
        if form.is_valid():
            vdl_name = form.cleaned_data.get("vdl_name")
            stations = form.cleaned_data.get("stations")
            selected_stations = form.cleaned_data.get("selected_stations")

        return HttpResponseRedirect('new_vdl')

    else:
        form = VdlForm()

    return render(request, template_name, {'form': form, 'heading': heading_message, })

vdl.html

{% extends 'base.html' %}

{% block content %}

<form method="post">
  {% csrf_token %}

    <div class="jp-multiselect">
        <div class="from-panel">

            {{ form.vdl_name }}
            <br>
            {{ form.stations }}

        </div>
        <div class="move-panel">
            <button type="button" class="btn-move-all-right btn-primary"></button>
            <button type="button" class="btn-move-selected-right"></button>
            <button type="button" class="btn-move-all-left"></button>
            <button type="button" class="btn-move-selected-left"></button>
        </div>
        <div class="to-panel">

            {{ form.selected_stations }}

        </div>
        <div class="control-panel">
            <button type="button" class="btn-delete"></button>
            <button type="button" class="btn-up"></button>
            <button type="button" class="btn-down"></button>
        </div>

    </div>

  <button type="submit">Submit</button>
</form>

<script>
    $(".jp-multiselect").jQueryMultiSelection();
</script>


{% endblock %}

в моем base.html я импортирую js файл, упомянутый в плагине:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<link rel="stylesheet"href="{% static '/js/jquery-multi-selection.css' %}">
<script src="{% static '/js/jquery.multi-selection.v1.js' %}"></script>
Вернуться на верх