Как я могу получить один объект при выборе объекта из зависимого выпадающего списка в django

(Я работаю над зависимым выпадающим списком в Django) У меня есть два выпадающих списка первый - Компания и второй - Автомобиль. Когда я выбираю название компании из первого выпадающего списка, например, Toyota, все автомобили относятся к компании Toyota, когда я выбираю любой автомобиль из второго выпадающего списка (Car Dropdown), то он не показывает ничего против Toyota Мне нужен только один автомобиль, который я выбрал, Как я могу это сделать? Кто-нибудь может помочь?

enter image description here

Выдает пустую страницу, как эта

enter image description here

Вот мой код

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>&nbsp;&nbsp;Search Here&nbsp;&nbsp;</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";
    })
Вернуться на верх