Как сделать зависимый выпадающий список для поиска по сайту?

@Stas Workout · Регистрация: 20.12.2017

Студворк — интернет-сервис помощи студентам

Всем привет. Подскажите, пожалуйста, если не трудно, как правильно написать скрипт, чтобы при выборе области отображались города только этой области, а при выборе города отображались районы только этого города.
Вот мои модели:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Region(models.Model):
    name = models.CharField(max_length=100, verbose_name='Название области')
 
    def __str__(self):
        return self.name
 
class City(models.Model):
    region = models.ForeignKey(Region, on_delete=models.CASCADE, verbose_name='Область')
    name = models.CharField(max_length=100, verbose_name='Название города')
 
    def __str__(self):
        return self.name
 
class District(models.Model):
    city = models.ForeignKey(City, on_delete=models.CASCADE, verbose_name='Город')
    name = models.CharField(max_length=100, verbose_name='Название района')
 
    def __str__(self):
        return self.name

Функция поиска во views.py:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
def search(request):
    regions = Region.objects.all()
    cities = City.objects.all()
    districts = District.objects.all()  
    queryset_list = Listing.objects.order_by('-list_date')
 
    if 'region' in request.GET:
        region_id = request.GET.get('region')
        if region_id:
            queryset_list = queryset_list.filter(region_id=region_id)
 
    if 'city' in request.GET:
        city_id = request.GET.get('city')
        if city_id:
            queryset_list = queryset_list.filter(city_id=city_id)
 
    if 'district' in request.GET:
        district_id = request.GET.get('district')
        if district_id:
            queryset_list = queryset_list.filter(district_id=district_id)
 
    context = {
        'regions': regions,
        'cities': cities,
        'districts': districts,
        'listings': queryset_list,
        'values': request.GET
    }
    return render(request, 'listings/search.html', context)

В шаблоне просто выводятся динамически области, города и районы, чтобы по ним можно было искать объявления:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<form action="{% url 'search' %}">    
       <div class="form-row">
        <div class="col-md-3 mb-3">                  
          <label class="sr-only">Область</label>
          <select name="region" class="form-control" id="region_id">
            <option selected="true" disabled="disabled">Область</option>
            {% for region in regions %}
              <option value="{{ region.pk }}">{{ region.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-3 mb-3">
          <label class="sr-only">Город</label>
          <select name="city" class="form-control" id="city_id">
            <option selected="true" disabled="disabled">Город</option>
              {% for city in cities %}
                <option value="{{ city.pk }}">{{ city.name }}</option>
              {% endfor %}
          </select>
        </div>                
        <div class="col-md-3 mb-3">
          <label class="sr-only">Район</label>
          <select name="district" class="form-control" id="district_id">
            <option selected="true" disabled="disabled">Район</option>
              {% for district in districts %}
                <option value="{{ district.pk }}">{{ district.name }}</option>
              {% endfor %}
          </select>
        </div>
      </div>
    </form>

Рыжий Лис · 12.05.2019, 08:51

Подгружать списки ajax'ом. Выбрали город — сделали запрос на сервер, отрисовали города.

@Stas Workout · 12.05.2019, 12:09 **[ТС]**

Рыжий Лис, можете, пожалуйста, привести пример, как будет выглядеть скрипт? Как правильно подгрузить список, сейчас списки подгружаются во всю функцию поиска, т.е. рендерится полностью вся страница, а как ПОДгрузить правильно? Нужно во вьюхе ещё функцию создавать или это всё можно сделать непосредственно в шаблоне?

Рыжий Лис · 12.05.2019, 12:18

код js: Не могу получить ответ от python скрипта и на его основе создать список (зависимые списки js ajax python)

Да, придётся создать отдельную вьюху, которая будет отдавать json.

@Stas Workout · 12.05.2019, 14:02 **[ТС]**

Рыжий лис, а можно как-то совместить функцию поиска, в которой уже области, города и районы динамически подгружаются в шаблон, в форме поиска? Может, можно как-то в скрипте оборатиться непосредственно к той части шаблона, где из функции уже подгрузились нужные мне области, города и районы?

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

Рыжий Лис Просто Лис 5972 / 3734 / 1099 Регистрация: 17.05.2012 Сообщений: 10,791 Записей в блоге: 9
	12.05.2019, 08:51
	Подгружать списки ajax'ом. Выбрали город — сделали запрос на сервер, отрисовали города. 1

@Stas Workout 0 / 0 / 0 Регистрация: 20.12.2017 Сообщений: 5
	12.05.2019, 12:09 [ТС]
	Рыжий Лис, можете, пожалуйста, привести пример, как будет выглядеть скрипт? Как правильно подгрузить список, сейчас списки подгружаются во всю функцию поиска, т.е. рендерится полностью вся страница, а как ПОДгрузить правильно? Нужно во вьюхе ещё функцию создавать или это всё можно сделать непосредственно в шаблоне? 0

Рыжий Лис Просто Лис 5972 / 3734 / 1099 Регистрация: 17.05.2012 Сообщений: 10,791 Записей в блоге: 9
	12.05.2019, 12:18
	код js: Не могу получить ответ от python скрипта и на его основе создать список (зависимые списки js ajax python) Да, придётся создать отдельную вьюху, которая будет отдавать json. 1

@Stas Workout 0 / 0 / 0 Регистрация: 20.12.2017 Сообщений: 5
	12.05.2019, 14:02 [ТС]
	Рыжий лис, а можно как-то совместить функцию поиска, в которой уже области, города и районы динамически подгружаются в шаблон, в форме поиска? Может, можно как-то в скрипте оборатиться непосредственно к той части шаблона, где из функции уже подгрузились нужные мне области, города и районы? 0