如何使用依赖的下拉列表Django + JS进行搜索？

Question

Tell me, please, if it is not difficult, how to write a script correctly, so that when choosing a region, only cities of this region are displayed, and when choosing a city, only district of this city are displayed. I need this for search.

Models:

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

Search function in views.py:

def search(request):
    districts = District.objects.all()
    cities = City.objects.all()
    regions = Region.objects.all()
    queryset_list = Listing.objects.order_by('-list_date')

    if 'region' in request.GET:
        region_id = request.GET.get('region')
        cities = City.objects.filter(region_id=region_id).order_by('name')
        if region_id:
            queryset_list = queryset_list.filter(region_id=region_id)

    if 'city' in request.GET:
        city_id = request.GET.get('city')
        districts = District.objects.filter(city_id=city_id).order_by('name')
        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)

So far, thanks to this function, the entire list of regions, cities and districts is dynamically displayed in the template, the search also works, but it is necessary that the choice be dependent. search.html:

    <form action="{% url 'search' %}">    
               <div class="form-row">
                <div class="col-md-3 mb-3">                  
                  <label class="sr-only">Region</label>
                  <select name="region" class="form-control" id="id_region">
                    <option selected="true" disabled="disabled">Region</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">City</label>
                  <select name="city" class="form-control" id="id_city">
                    <option selected="true" disabled="disabled">City</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">District</label>
                  <select name="district" class="form-control" id="id_district">
                    <option selected="true" disabled="disabled">District</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">Search</button>
            </form>

I know that this is being done on JS, but I'm completely new to it, so if it's not hard, please, an example, what will the script look like in my situation? Thanks a lot in advance!

Answer 1

you can use smart_selects package

example:

from smart_selects.db_fields import ChainedForeignKey

country = models.ForeignKey(Country, verbose_name=_("Country"), related_name='JobRequests_country')
city = ChainedForeignKey(
    City,
    chained_field='country',
    chained_model_field='country',
    show_all=False,
    auto_choose=True,
    verbose_name=_("City"),
    related_name='JobRequests_city'
)