Django Select 2 小部件不工作,呈现字段但未应用样式

Django Select 2 Widget not working , Field rendered but styles not applied

一段时间以来,我一直在尝试使用多个 select using django-select2 小部件

第 1 步:我使用 pip install django-select2

安装了 django-select2

第 2 步:将其添加到已安装的应用程序

INSTALLED_APPS = [
...
django_select2
...
]

第 3 步:我将以下内容添加到 settings.py

SELECT2_JS = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js"
SELECT2_CSS = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css"
SELECT2_I18N_PATH = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/i18n"

第 4 步:我尝试使用小部件

from django_select2.forms import Select2MultipleWidget
class ClientForm(AppModelForm):

    class Meta:
        model = Client
        fields = "__all__"
        exclude = ['client_website']
        widgets = {
            'point_of_contact': Select2MultipleWidget
        }

第 5 步:只渲染表单,不使用任何循环

{{ client_form }}

结果是

没有样式应用于 select。

我也试过在 head 标签中包含样式和脚本(没有帮助)。

我相信小部件可以正常工作,因为当我从 Select2MultipleWidget 切换到 Select2Widget 时,它会变为单个 select

<select name="point_of_contact" lang="None" data-minimum-input-length="0" data-theme="default" data-allow-clear="true" data-placeholder="" id="id_point_of_contact" class="django-select2" multiple="">
  <option value="2">Test</option>

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

</select>

以上是 django

为 multi select 小部件呈现的 html

请帮助获取 django-select2

的功能

默认情况下 SELECT2_JSSELECT2_CSS 指向各自的 Cloudflare CDN。当你想从 CDN 加载特定版本或者当你想从本地存储加载时使用它。

确保将 select2 url 模式添加到主 urls.py:

urlpatterns = [
    path("select2/", include("django_select2.urls")),
    # other patterns
]

并在模板文件中添加表单资源:

<!-- To render stylesheet link tags of select2 -->
{{ client_form.media.css }}

<form method="POST">
    {% csrf_token %}
    {{ client_form }}
    <input type="submit">
</form>

<!-- Add JQuery script -->
<!-- To render script tags of select2 -->
{{ client_form.media.js }}

此处提供安装和快速入门指南:
https://django-select2.readthedocs.io/en/latest/#installation
https://django-select2.readthedocs.io/en/latest/#quick-start

Django 表单资产:https://docs.djangoproject.com/en/3.2/topics/forms/media/