Django中动态传递Select选项值到URL的教程

# your_app/urls.py
from django.urls import path
from . import views

urlpatterns = [
    # 定义一个接收字符串类型参数'category'的URL模式
    path('searchbycategory/<str:category>/', views.search_by_category, name='searchbycategory'),
    # ... 其他URL模式
]

# your_app/views.py
from django.shortcuts import render
from .models import Item # 假设您有一个Item模型

def search_by_category(request, category):
    """
    根据传入的分类参数过滤并显示商品列表。
    """
    if category == 'none':
        items = Item.objects.all() # 显示所有商品
    else:
        items = Item.objects.filter(category=category) # 根据分类过滤

    context = {
        'items': items,
        'selected_category': category # 将当前选中的分类传回模板，用于设置select的默认值
    }
    return render(request, 'your_template.html', context)

<!-- your_template.html -->
<main>
    <section class="topbar">
        <select name="category" id="category_select" onchange="redirectToCategory(this.value)">
            <!-- 根据后端传来的selected_category设置默认选中项 -->
            <option value="none" {% if selected_category == 'none' %}selected{% endif %}>All category</option>
            <option value="book" {% if selected_category == 'book' %}selected{% endif %}>Books</option>
            <option value="notes" {% if selected_category == 'notes' %}selected{% endif %}>Notes</option>
            <option value="fur" {% if selected_category == 'fur' %}selected{% endif %}>Furniture</option>
            <option value="draw" {% if selected_category == 'draw' %}selected{% endif %}>Drawing tools</option>
            <option value="others" {% if selected_category == 'others' %}selected{% endif %}>Others</option>
        </select>
    </section>
</main>

<script>
    /**
     * 根据选中的分类值重定向页面。
     * @param {string} selectedValue - select元素当前选中的值。
     */
    function redirectToCategory(selectedValue) {
        // 使用Django的{% url %}标签生成一个带占位符的基础URL
        // 然后在JavaScript中替换占位符。
        // 'PLACEHOLDER' 必须与urls.py中定义的参数名（category）匹配，
        // 但此处我们只是用它来生成一个可替换的字符串。
        const baseUrlPattern = "{% url 'searchbycategory' category='PLACEHOLDER' %}";

        // 替换占位符为实际选中的值
        const targetUrl = baseUrlPattern.replace('PLACEHOLDER', selectedValue);

        // 执行页面重定向
        window.location.href = targetUrl;
    }

    // 优化：在页面加载时，确保select元素显示当前分类
    document.addEventListener('DOMContentLoaded', function() {
        const selectElement = document.getElementById('category_select');
        if (selectElement && "{{ selected_category }}") {
            selectElement.value = "{{ selected_category }}";
        }
    });
</script>