Отображение значения поля multiselect в выпадающем мультиселекте Bootstrap 4 в шаблоне Django

Я следую этому ответу для многоселективного выпадающего списка. Я использую django-multiselectfield для сбора данных в модели DB. Я хочу показать значение в бутстраповском многоселекторном выпадающем списке, но получаю следующий результат enter image description here

Я ищу этот результат

enter image description here

Вот мои фрагменты кода

model.py

from django.db import models
from multiselectfield import MultiSelectField

class Country(models.Model):
    name = models.CharField(max_length=40)

    def __str__(self):
        return self.name


class Person(models.Model):
    obj=Country.objects.all()
    TEAM=tuple((ob,ob) for ob in obj) 
    name = models.CharField(max_length=124)
    southasia=MultiSelectField(max_length=200, choices=TEAM)
    
    def __str__(self):
        return self.name

views.py

from django.http import JsonResponse
from django.shortcuts import render, redirect, get_object_or_404

from .forms import PersonCreationForm
from .models import Person


def person_create_view(request):
    form = PersonCreationForm()
    if request.method == 'POST':
        form = PersonCreationForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('person_add')
    return render(request, 'miracle/index.html', {'form': form})

forms.py

from django import forms
from .models import Person


class PersonCreationForm(forms.ModelForm):
    class Meta:
        model = Person
        fields = '__all__'

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

шаблон

{% load crispy_forms_tags %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <title>Dependent Dropdown in Django</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

</head>
<body>
<h2>Person Form</h2>

<form method="post">
     {% csrf_token %}
     {{ form.name|as_crispy_field }}
     <select class="selectpicker" multiple data-live-search="true">
        {{ form.southasia|as_crispy_field }}
    </select>
    <input type="submit" value="Submit">
</form>

<script>
$('select').selectpicker();
</script>

</body>
</html>

Как сделать так, чтобы в выпадающем мультиселекте отображались все значения вместо обычного выбора флажка?

django multiselect даст вам вид флажка. Если вам нужен выпадающий список из нескольких вариантов, то вы можете создать другую модель для выбора и использовать отношение manytomany. Django рендеринг автоматически определит это как выпадающий список и даст вам возможность выбрать несколько вариантов.

Like this.

Класс model1(model.models) Choices = models.charfield(choice=choice)

Class person(models.model) Choice = manytomany (model1).

Вернуться на верх