如何将HTML下拉框选择值传递至Django的views.py实现商品筛选？

问题排查 #

你的代码存在3个核心问题导致功能失效：

1. 表单与下拉框的id重复（均为selected_brand），引发DOM选择冲突
2. JS代码中使用.forms类选择表单，但表单未添加该类，无法触发提交
3. 页面刷新后下拉框无法保留用户选中的品牌，体验不佳

修复步骤 #

1. 修正HTML代码 #

调整DOM元素id，同时添加选中状态保留逻辑：

<form action="{% url 'shop' %}" method="get" class="brand-filter-form">
  <select name="selected_brand" id="brand-select">
    <option value="ALL" {% if brand_text == 'ALL' or brand_text is None %}selected{% endif %}>Select Brand</option>
    <option value="A" {% if brand_text == 'A' %}selected{% endif %}>A_BRAND</option>
    <option value="B" {% if brand_text == 'B' %}selected{% endif %}>B_BRAND</option>
    <option value="C" {% if brand_text == 'C' %}selected{% endif %}>C_BRAND</option>
  </select>
</form>

2. 修正JavaScript代码 #

通过closest方法精准定位当前下拉框所属的表单，避免选择器错误：

$(document).ready(function(){
  $("#brand-select").change(function () {
    $(this).closest("form").submit();
  });
});

3. 简化视图逻辑（可选优化） #

精简原有冗余的条件判断，让代码更简洁：

def ShopView(request):
    brand_text = request.GET.get('selected_brand', 'ALL')  # 默认设为ALL
    product_list = Product.objects.filter(brand=brand_text) if brand_text != 'ALL' else Product.objects.all()

    context = {
        'brand_text': brand_text,
        'product_list': product_list,
    }
    return render(request, 'shop_test.html', context)

核心修复说明 #

• 唯一DOM标识：确保每个元素的id唯一，避免选择器冲突
• 精准表单提交：利用closest方法绑定下拉框与所在表单，提交逻辑更可靠
• 选中状态保留：通过模板判断brand_text的值，页面刷新后自动回显用户选择的品牌

内容的提问来源于stack exchange，提问作者Mircea Im