Как я могу получить один объект при выборе объекта из зависимого выпадающего списка в django
(Я работаю над зависимым выпадающим списком в Django) У меня есть два выпадающих списка первый - Компания и второй - Автомобиль. Когда я выбираю название компании из первого выпадающего списка, например, Toyota, все автомобили относятся к компании Toyota, когда я выбираю любой автомобиль из второго выпадающего списка (Car Dropdown), то он не показывает ничего против Toyota Мне нужен только один автомобиль, который я выбрал, Как я могу это сделать? Кто-нибудь может помочь?
Выдает пустую страницу, как эта
Вот мой код
models.py
views.py
def searchdd(request):
carForm = Car.objects.all()
companyname = request.POST.get('company_ddl')
carname = request.POST.get('car_name')
if request.method == "POST":
carForm = Car.objects.filter(company=companyname)
context = {'carForm':carForm}
return render(request, 'app/searchdd.html', context)
# **this method for select just one car against company**
if request.method == "POST":
carForm = Car.objects.filter(CarName=carname)
context = {'carForm':carForm}
return render(request, 'app/searchdd.html', context)
home.html
<form method="post" id="indexForm" action="/searchdd" data-cars-url="{% url 'ajax_load_cars' %}">
{% csrf_token %}
<div class="col-md-12">
<div class="row">
<div class=" col-md-3">
<label for="" class="white">Make</label>
<select id="companyddl" name="company_ddl" class="searchengine dp-list">
<option disabled selected="true" value="">--Select Make--</option>
{% for company in companies %}
<option value="{{company.CompanyID}}">{{company.CompanyName}}</option>
{% endfor %}
</select>
</div>
<div class=" col-md-3">
<label for="" class="white">Model</label>
<select id="carddl" name="car_name" class="searchengine dp-list">
<option disabled selected="true" value="">--Select Model--</option>
</select>
</div>
</div>
<div class=" col-md-3">
<label class="white">Search </label>
<button class="btn-dark" type="submit" value="search"><i class="fa fa-search"></i> Search Here </button>
</div>
</div>
urls.py
urlpatterns = [
path('', views.home, name='home'),
path('search', views.search, name='search'),
path('load-cars', views.load_cars, name='ajax_load_cars'),
path('searchdd', views.searchdd, name='searchdd'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Сделайте что-то вроде этого : HTML
<div>
<h5 class="mb-2">Company</h5>
<select id="company" name="company">
<option label="Select category" selected hidden></option>
<option value="Toyota" id=Toyota">Toyota</option>
<option value="Honda" id="Honda">Honda</option>
<option value="Ford" id="Ford">Ford</option>
</select>
</div>
<div>
<h5 class="my-2">Car</h5>
<select id="car" name="car">
<option label="Select a Category First" selected>
</select>
</div>
JavaScript :
obj = {"Toyota":["Corolla","Supra"],"Honda":["Civic","Accord"],"Ford":["Mustang","GT"]}
document.getElementById("category").addEventListener("change", function () {
var category = document.getElementById("company").value;
var str = `<option label="Select car" value="" selected="" hidden=""></option>`;
sub = obj[company];
//console.log(sub);
sub.forEach(function (value) {
temp = `<option value="${value}" id="${value}">${value}</option>`;
str = str + temp;
})
document.getElementById("car").innerHTML = str;
document.getElementById("car").style.display = "block";
})