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

@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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .

Рыжий Лис Просто Лис 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

Опции темы