在 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 链接