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

Question

请告诉我，如果不困难，如何正确编写脚本，以便在选择区域时，仅显示该区域的城市，并且在选择城市时，仅显示该城市的区域。 我需要这个搜索。

楷模：

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中的搜索功能：

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)

到目前为止，由于这个功能，整个区域，城市和地区列表都会动态显示在模板中，搜索也可以，但是选择必须依赖。 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>

我知道这是在JS上完成的，但我完全不熟悉它，所以如果不是很难，请举个例子，在我的情况下脚本会是什么样子？ 非常感谢提前！

Answer 1

你可以使用smart_selects包

例：

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'
)