Node.js实现<select>标签切换分类刷新页面内容

一、后端路由修改（listingRouting.js） #

修改路由逻辑，支持通过查询参数接收分类ID，筛选对应项目后传递给模板：

router.get('/', (req, res, next) => {
    // 获取前端传入的分类ID，默认0表示所有分类
    const selectedCategoryId = parseInt(req.query.category) || 0;
    
    // 根据分类ID筛选可展示的项目
    let filteredItems = itemsListPassed.filter(item => item.canBeShown === true);
    if (selectedCategoryId !== 0) {
        filteredItems = filteredItems.filter(item => item.categoryId === selectedCategoryId);
    }

    res.render('listshow', {
        title: 'pageTitle',
        itemsList: filteredItems,
        itemsCategories: itemsCategoriesPassed,
        selectedCategoryId // 传递当前选中的分类ID，用于前端选中对应选项
    });
});

二、前端模板修改（listshow.ejs） #

1. 包裹select到表单中，添加 onChange 提交逻辑
   将select放入GET表单，选择分类时自动提交表单触发页面刷新：

   <form method="GET" action="/">
       <select name="category" id="allCategories" class="form-select form-select-lg mb-3"
               aria-label=".form-select-lg example" onchange="this.form.submit()">
           <option class="changeToArabic" value="0" <%= selectedCategoryId === 0 ? 'selected' : '' %>>كل الأقسام الطبية</option>
           <% itemsCategories.forEach(item=> { %>
               <option class="changeToArabic" value="<%= item.categoryId%>" <%= selectedCategoryId === item.categoryId ? 'selected' : '' %>>
                   <%= item.categoryName %>
               </option>
           <% }) %>
       </select>
   </form>
   

   • 注意将select的name改为category，与后端req.query.category对应
   • 通过selectedCategoryId判断并选中当前分类的选项，保持页面状态一致

2. 修正「获取全部项目」按钮链接
   点击按钮时传递category=0参数，回到全部分类展示：

   <a href="/?category=0" class="btn btn-primary mb-3">Get All Items</a>
   

3. 简化项目卡片渲染逻辑
   由于后端已完成筛选，前端无需再做过滤，直接遍历即可：

   <% itemsList.forEach(item => { %>
       <div class="col-lg-4 wow slideInUp" data-wow-delay="0.4s">
           <div class="team-item wow zoomIn">
               <div class="position-relative rounded-top" style="z-index: 1;">
                   <img class="img-fluid rounded-top w-100" src="/images/<%= item.smallImageName %>.jpg" alt="">
                   <div class="position-absolute top-100 start-50 translate-middle bg-light rounded p-2 d-flex">
                       <button class="btn btn-dark px-4" style="margin: 10px; width: 200px;">Details</button>
                   </div>
               </div>
               <h4 class="mb-2">
                   <%= item.itemName%>
               </h4>
           </div>
       </div>
   <% }) %>
   

功能说明 #

选择分类时，select的onchange事件触发表单提交，后端接收分类ID并筛选对应项目，重新渲染页面展示该分类下的所有可展示项目；点击「Get All Items」按钮则回到全部分类展示状态。

内容的提问来源于stack exchange，提问作者Ramez Ayad