Проблемы с фреймворком jquery/select2 - он не работает в моем проекте django

Я новичок в python, все еще изучаю этот язык и фреймворк django. Сейчас я делаю простой проект и столкнулся с такой проблемой: я не могу изменить дизайн, потому что select2 и jquery не работают в html документе. Вот мои файлы:

base.html

forms.py

from django import forms
from cities.models import City


class RouteForm(forms.Form):
    from_city = forms.ModelChoiceField(
        label='Откуда', queryset=City.objects.all(), widget=forms.Select(
            attrs={ 'class': 'form-control js-example-basic-single' }))
    to_city = forms.ModelChoiceField(
        label='Куда', queryset=City.objects.all(), widget=forms.Select(
            attrs={'class': 'form-control js-example-basic-single'}))
    cities = forms.ModelMultipleChoiceField(
        label='Через города', queryset=City.objects.all(), required=False,
        widget=forms.SelectMultiple(
            attrs={'class': 'form-control js-example-basic-multiple'}
        )
    )
    travelling_time = forms.IntegerField(label='Время в пути', widget=forms.NumberInput(attrs={
            'class': 'form-control',
            'placeholder': 'Время в пути'
        }))

settings.py

from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent
DEBUG = True
ALLOWED_HOSTS = []

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_select2',
    'routes',
    'cities',
    'trains',

]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'travel.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'travel.wsgi.application'

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

urls.py

from django.contrib import admin
from django.urls import path, include

import routes
from routes.views import home

urlpatterns = [
    path('admin/', admin.site.urls),
    path('cities/', include(('cities.urls', 'cities'))),
    path('trains/', include(('trains.urls', 'trains'))),
    path('', home, name='home'),
    path("select2/", include("django_select2.urls")),
]

Так что я буду очень благодарна, если кто-нибудь мне поможет!

Если вы хотите иметь возможность использовать JQuery / select2 в HTML, вы можете сделать что-то вроде этого.

page.html

<!doctype html>
<html lang="ar" dir="rtl">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
</head>
<body>

<!-- Optional JavaScript; choose one of the two! -->
<select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
      ...
    <option value="WY">Wyoming</option>
</select>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
        crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>
</body>
</html>

Возможно, в вашем файле forms.py неправильно задан класс js-example-basic-single. Если это так, Эта ссылка может помочь вам.

Надеюсь, это ответ на ваш вопрос.

для меня это работает следующим образом

layout.html

<head>    
<link href="{% static 'select2/css/select2.css' %}" rel="stylesheet">
      <link href="{% static 'select2/css/select2-bootstrap4.min.css' %}" rel="stylesheet">
</head>
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
     <script src="{% static 'select2/js/select2.js' %}"></script>
      <script src="{% static 'select2/js/i18n/es.js' %}"></script>
      <script>

        $('.select2').select2({
            theme: "bootstrap4",
            language: 'es'
        });
        
        $(document).ready(function() {
            $('select[name="selector"]').select2();
        });
        </script>
</body>

в файле form.py

class ExampleForm(forms.ModelForm):
    class Meta:
        model = Example
        fields = '__all__'        
        widgets = {
            'name': forms.TextInput(attrs={'class':'form-control' }),
            'exampleselect': forms.Select(attrs={'class':'form-control select2'}),
        }

в templates/example/example_form.html

<form action="" method="post">{% csrf_token %} 
            <div class="mb-3">               
                {{form}}
            </div>            
            <button type="submit" class="btn btn-primary text-center">Save</button>
          </form>
Вернуться на верх