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

Posted

技术标签:

【中文标题】在 Django 模板的 Bootstrap 4 多选下拉列表中显示多选字段值【英文标题】:Show multiselectfield value in Bootstrap 4 multiselect dropdown in Django template 【发布时间】:2021-12-11 17:37:42 【问题描述】:

我正在关注answer 的多选下拉菜单。我正在使用django-multiselectfield 收集数据库模型中的数据。我想在引导多选下拉列表中显示值,但得到以下结果

我正在寻找这个result

这些是我的代码 sn-p


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>

如何在下拉多选而不是普通的复选框选择中显示所有值?

【问题讨论】:

【参考方案1】:

django 多选将为您提供复选框视图。如果您想要下拉多个列表,解决方法之一是您可以为选择创建另一个模型并使用 manytomany 关系。 Django 渲染应自动将其检测为下拉列表视图,并为您提供选择多个选项的选项。

像这样。

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

类人(models.model) 选择 = manytomany (model1)。

【讨论】:

以上是关于在 Django 模板的 Bootstrap 4 多选下拉列表中显示多选字段值的主要内容,如果未能解决你的问题,请参考以下文章

在 Django 模板的 Bootstrap 列表组中显示数据

Django 无空格模板标签会破坏 Bootstrap 呈现的内容

无法在 Django 模板标签、Twitter Bootstrap 中嵌入 YouTube 链接

django模板

导航链接在导航栏中不起作用(Bootstrap)(Django)

twitter bootstrap 下拉菜单在 django 模板中不起作用