javascript - 如何使用依赖下拉列表 Django + JS 进行搜索?
问题描述
请告诉我,如果不难的话,如何正确编写脚本,以便在选择地区时只显示该地区的城市,而在选择城市时只显示该城市的地区。我需要这个来搜索。
楷模:
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)
到目前为止,由于有了这个功能,整个地区、城市和地区的列表在模板中动态显示,搜索也可以,但选择依赖是必要的。搜索.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 上完成的,但我对它完全陌生,所以如果不难,请举个例子,脚本在我的情况下会是什么样子?提前非常感谢!
解决方案
你可以使用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'
)
推荐阅读
- mysql - MySql 数据库中的超链接
- r - 如何使用 group_by() / summarise() 快速创建多个汇总表?
- ios - 如何将我的 Firebase Analytics 数据传输到 BigQuery?
- ios - youtube 网址打不开
- ruby-on-rails - 模块解析失败:将 React on Rails 与 Antd 一起使用时出现意外字符“@”。
- php - 如何在 html/php 中进行内联样式设置?
- laravel - 方法前的火灾观察者
- three.js - 启用雾时的 OutlineEffect 错误,无效着色器错误:0:204:'fogDepth':重新定义
- x86 - 错误:在 BIOS 设置中禁用了 IBS 分析
- android - 尝试通过 contentProvider 从 sqlite 中删除有条件的行