在 Django 模板的 Bootstrap 4 多选下拉列表中显示多选字段值

Question

I am following this answer for the multi-selecting dropdown.我正在关注多选下拉列表的这个答案。 I am using django-multiselectfield to collect data in the DB model.我正在使用django-multiselectfield在 DB 模型中收集数据。 I want to show value in bootstrap multi-selecting dropdown but getting the below result我想在 bootstrap 多选下拉列表中显示值，但得到以下结果

I am seeking this result我正在寻求这个结果

These are my code snippet这些是我的代码片段

model.py模型.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视图.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表格.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)

template模板

{% 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>

How can do show all values in dropdown multiselect instead of normal checkbox select?如何在下拉多选而不是普通复选框选择中显示所有值？

Answer 1

django multiselect will give you check box view. django multiselect 会给你复选框视图。 If you want drop-down multiple list one of the work around is you can create another model for the choices and use manytomany relation .如果您想要下拉多个列表，其中一个解决方法是您可以为选择创建另一个模型并使用 manytomany 关系。 Django rendering should automatically detect it as droplist view and gives you opttion to select multiple choices. Django 渲染应自动将其检测为下拉列表视图，并为您提供选择多个选项的选项。

Like this.像这样。

Class model1(model.models) Choices = models.charfield(choice=choice)类 model1(model.models) Choices = models.charfield(choice=choice)

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

在 Django 模板的 Bootstrap 4 多选下拉列表中显示多选字段值

问题描述

1 个解决方案

解决方案1
0 2021-10-26 12:13:08

在 Django 模板的 Bootstrap 4 多选下拉列表中显示多选字段值

问题描述

1 个解决方案

解决方案1 0 2021-10-26 12:13:08

解决方案1
0 2021-10-26 12:13:08