如何在与html页面中另一个下拉列表中的数据相对应的下拉列表中显示数据？

Question

我正在尝试使用 Python DJANGO 创建一个网页，其中我有两个下拉列表，其中一个用于类别，另一个用于子类别，用于从数据库中获取数据。在 DB 中，分别有两列用于类别和另一列用于子类别。

例如，有 2 个类别，即男孩和女孩。对于男孩，SubCategory 列下有 3 个名字，女孩也是如此。所以我想要的是，在下拉菜单 1 中，它应该显示“男孩”和“女孩”。当用户选择其中任何一个时，相应的名字应该出现在第二个下拉列表中（即当在下拉列表1中选择“男孩”时，只有男孩的名字应该出现在下拉列表2中）。

但是按照我写的方式，它显示所有数据，而与下拉菜单中的选择无关。如何使子类别数据分类显示？

查看.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

1. 您可以使用 ajax。当用户更改第一个输入时，ajax 将更新您的第二个输入的选项。
2. 您可以将django-select2 与dependent_fields 选项一起使用。

Answer 2

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，它很方便做自动完成的东西，优雅地处理各种字段之间的关系