Hello. I do a search on the site, I need to make a dependent drop-down list. I made a script following the example with a backend in php, tried to remake for django, but I just don’t understand how to get data from the database in the script while they are displayed dynamically in the template, but I need to get it in order to make the dependent list, who understands, Please see how to correctly set the url variable in the script to pull regions, cities and districts:
Search function in views.py:
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 = { 'districts': districts, 'cities': cities, 'regions': regions, 'listings': queryset_list, 'values': request.GET } return render(request, 'listings/search.html', context) urls.py
path('search', views.search, name='search'), Template:
<form action="{% url 'search' %}"> <!-- Form Row 1 --> <div class="form-row"> <div class="col-md-3 mb-3"> <label class="sr-only">Область</label> <select name="region_id" id="region_id" class="form-control"> <option value="0">-Выберите область-</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_id" id="city_id" class="form-control" > <option value="0">-Выберите город-</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_id" id="district_id" class="form-control"> <option value="0">-Выберите район-</option> {% for district in districts %} <option value="{{ district.pk }}">{{ district.name }}</option> {% endfor %} </select> </div> </div> <button class="btn btn-secondary btn-block mt-4" type="submit">Поиск</button> </form> Script
$(document).ready(function () { $('#region_id').change(function () { var region_id = $(this).val(); if (region_id == '0') { $('#city_id').html('<option>-Выбирите город-</option>'); $('#city_id').attr('disabled', true); $('#district_id').html('<option>-Выбирите район-</option>'); $('#district_id').attr('disabled', true); return(false); } $('#city_id').attr('disabled', true); $('#city_id').html('<option>Загрузка...</option>'); var url = "{% url 'search' %}"; $.get( url, "region_id=" + region_id, function (result) { if (result.type == 'error') { alert('error'); return(false); } else { var options = ''; $(result.cities).each(function() { options += '<option value="' + $(this).attr('city_id') + '">' + $(this).attr('name') + '</option>'; }); $('#city_id').html('<option value="0">-Выбирите город-</option>'+options); $('#city_id').attr('disabled', false); $('#district_id').html('<option>-Выбирите район-</option>'); $('#district_id').attr('disabled', true); } }, "json" ); }); $('#city_id').change(function () { var city_id = $('#city_id :selected').val(); if (city_id == '0') { $('#district_id').html('<option>-Выбирите район-</option>'); $('#district_id').attr('disabled', true); return(false); } $('#district_id').attr('disabled', true); $('#district_id').html('<option>Загрузка...</option>'); var url = "{% url 'search' %}"; $.get( url, "city_id=" + city_id, function (result) { if (result.type == 'error') { alert('error'); return(false); } else { var options = ''; $(result.districts).each(function() { options += '<option value="' + $(this).attr('district_id') + '">' + $(this).attr('name') + '</option>'; }); $('#district_id').html('<option>Выбирите район</option>'+options); $('#district_id').attr('disabled', false); } }, "json" ); }); }); 