Django表单：Django-select 2未正确渲染多选框

nfg76nw0 于 2023-03-20 发布在 Go

关注(0)|答案(1)|浏览(129)

我使用的是django-select 2：https://django-select2.readthedocs.io/en/latest/index.html
我试图创建一个多标签选择下拉框类似于这样：
https://raw.githubusercontent.com/asyncee/django-easy-select2/master/screenshots/select2_multiple.png
问题是它没有按预期加载，如下所示：
https://media.geeksforgeeks.org/wp-content/uploads/20191201114034/django-forms-multiplechoicefield-11.png
下面是我的代码。我目前使用的Select2TagWidget，但我已经尝试了以下其他小部件：

ModelSelect2MultipleWidget
Select2MultipleWidget

forms.py

class BankForm(ModelForm):
     required_css_class = "required"
     formField1 = forms.ModelMultipleChoiceField(
       queryset=Bank.objects.all(),
       label="Lead Bank",
       widget=Select2TagWidget,
)

class Meta:
model = AdditionalBank
fields = [
"formField1",
]

""" Labels for the fields we didn't override """
labels = {}

urls.py

我已将正确的路径添加到urls.py文件中
path("select2/", include("django_select2.urls")),
我已经在settings.py文件中正确设置了redis队列，我很有信心django-select 2的文档中列出的其余配置也设置正确
我的前端表单呈现此html/css：

<select name="lead_bank" lang="None" data-minimum-input-length="1" data-theme="default" data-allow-clear="false" data-tags="true" data-token-separators="\[\&quot;,\&quot;, \&quot; \&quot;\]" required="" id="id\_lead\_bank" class="django-select2" multiple="">

<option value="1">Citi</option>

<option value="2" selected="">USBank</option>

<option value="3">Wells Fargo</option>

<option value="4" selected="">NY Bank</option>

</select>

请记住，我是非常新的前端开发。主要是一个后端开发。

django

来源：https://stackoverflow.com/questions/75663733/django-forms-django-select2-not-rendering-multi-select-box-correctly

1条答案

按热度按时间

jvlzgdj91#

在这里，我创建了具有ManytoMany的Select2，如下所示

models.py

class Category(models.Model):
    name=models.CharField(max_length=200)
    def __str__(self):
        return self.name
    

class Product(models.Model):
    cates=models.ManyToManyField(Category)
    name=models.CharField(max_length=200)
    def __str__(self):
        return self.name

form.py

class ProductForm(forms.ModelForm):
    class Meta:
        model=Product
        fields="__all__"

        widgets = {
            'name':forms.TextInput(attrs={'class':'form-control'}),
            'cates':forms.Select(attrs={'class':'js-example-basic-multiple form-select','multiple':'multiple'}),
        }

views.py

def DemoView(request):
    form = ProductForm()
    context = {'form':form}
    return render(request,'index.html',context)

HTML（基本. html）

{% load static %}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>
    {% block title %}
    {% endblock title %}
  </title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      
    </div>
  </nav>

  {% block body %}

  {% endblock body %}

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
  <script>
    $(document).ready(function () {
      $('.js-example-basic-multiple').select2();
    });
  </script>
</body>

</html>

HTMl（索引. html）

<div class="container">
    <div class="row">
        <div class="col p-3">
            {{form.as_p}}
        </div>

    </div>
</div>

浏览器输出

赞(0）回复(0）举报 2023-03-20

我来回答