Как отобразить данные в раскрывающемся списке, соответствующие данным из другого раскрывающегося списка на странице html?

Question

Я пытаюсь создать веб-страницу, используя Python DJANGO, в котором у меня есть два раскрывающихся списка, один из которых предназначен для категории, а другой - для подкатегории, данные для которой извлекаются из базы данных. В БД есть два столбца для категории и еще один для подкатегории соответственно.

Например, есть 2 категории, т.е. мальчики и девочки. и для мальчиков есть 3 имени в столбце «Подкатегория», как и для девочек. Поэтому я хочу, чтобы в раскрывающемся списке 1 были показаны «мальчики» и «девочки». Когда пользователь выбирает любой из них, соответствующие имена должны появиться во втором раскрывающемся списке (т.е. только имена мальчиков должны отображаться в раскрывающемся списке 2, когда в раскрывающемся списке1 выбрано «мальчики»).

Но, как я написал, он показывает все данные независимо от выбора в раскрывающемся списке1. Как сделать так, чтобы данные подкатегории отображались категорично?

View.py:

def createTicketView(request):
    if request.method == 'POST':
        taskName=request.POST.get('title')
        taskDescription=request.POST.get('description')
        Category=request.POST.get('category')
        SubCategory=request.POST.get('type')
        user_id=request.user.id
        
        task=UserTaskDetails.objects.create(user_id=user_id,
                                           taskName=taskName,taskDescription=taskDescription,
                                             Category=Category,SubCategory=SubCategory)
        task.save()        
        return redirect('home')

    category =ServiceCategoryDetails.objects.values('category').distinct()
    subcategory=ServiceCategoryDetails.objects.values('SubCategory').distinct()  


    return render(request,'custws/ticket.html',{'title':'create ticket',
                                                'category':category,
                                                'subcategory':subcategory,
                                                '})

Html код:

<div class="form-group col-md-6">
            <label for="category" class="font-weight-bold">Category</label>
            <select name="category" id="category" class="form-control">
                {% for type in category %}
                <option value={{type.category}}>{{type.category}}</option>
                {% endfor %}
            </select>
       </div>
       <div class="form-group col-md-6">
            <label for="subcat" class="font-weight-bold">Sub Category</label>
            <select name="subcat" id="subcat" class="form-control">
                {% for type in subcategory %}
                <option value={{type.SubCategory}}>{{type.SubCategory}}</option>
                {% endfor %}
            </select>
   </div>

Answer 1

HTML

<form>
  ...
  <select id='subcat'></select>
</form>


$('#sub-btn').click(function(e){ 
    e.preventDefault();
    var data = {cat_id: <get_your_selected_id>}
    $.ajax( 
        { 
        type:"POST", 
        beforeSend: function (xhr) {
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.setRequestHeader("X-CSRFToken", csrf_token);
        },
        url: "<your-url>", 
        data:data,
        success: function(data){ 
          // on success, dynamically append the select drop down list 
          $('#subcat').html(data)  
        }
    });
})

ПРОСМОТР

def myview(request):
    ...
    if request.method == 'POST':
        cat_id = request.POST.get('cat_id')
        # create options, note: 'subcategories' should be replaced with your category related name
        options = [f"<option value='{i.pk}'>{i.value}</option>"+'\n'
                   for i in Category.objects.get(id=cat_id).subcategories.all()] 
        return HttpResponse(options)

Затем вызывается успешный обратный вызов и параметры динамически добавляются. Вы также можете вернуть JsonResponse данных и построить элемент option во внешнем интерфейсе.

Кроме того, посмотрите django -autocomplete-light , что очень удобно для выполнения автозаполнения и изящно обрабатывает все виды отношений между полями

Answer 2

1. Вы можете использовать ajax. Когда пользователь изменяет 1-й вход, ajax обновит параметры вашего 2-го входа.
2. Вы можете использовать django -select2 с опцией зависимые_поля.