如何根据用户下拉选项在EJS模板中展示MongoDB条件数据

核心思路 #

通过后端提供按年级筛选的API接口，前端监听下拉框变化时调用该接口获取对应模块数据，再动态渲染到页面。以下是具体实现步骤：

1. 后端新增按年级查询模块的API #

修改注册控制器，新增接口用于接收年级参数，从MongoDB中筛选对应年级的模块：

const db = require('../data/database');

async function getRegistration(req, res) {
  const modules = await db.getDb().collection('modules').find().toArray();
  res.render('student/registration/registration', { modules: modules });
};

// 新增：根据年级获取对应模块的接口
async function getModulesByYear(req, res) {
  const year = req.query.year;
  // 假设modules集合中存储年级的字段名为`year`，值与下拉框的value（0-3）对应
  const filteredModules = await db.getDb().collection('modules')
    .find({ year: parseInt(year) }) // 转数字匹配数据库字段类型
    .toArray();
  res.json(filteredModules); // 返回JSON格式数据
};

module.exports = {
  getRegistration: getRegistration,
  getModulesByYear: getModulesByYear
}

别忘了在路由文件中配置该接口：

const registrationController = require('./controllers/registration.controller');
// 配置API路由
app.get('/modules/by-year', registrationController.getModulesByYear);

2. 修复EJS模板的结构问题 #

原模板中循环重复创建ul#module-list会导致ID重复，JS无法正确操作。将ul标签移到循环外部：

<label for="year">Select year</label>
<select name="year" id="year">
  <option value="0">Year 1</option>
  <option value="1">Year 2</option>
  <option value="2">Year 3</option>
  <option value="3">Year 4</option>
</select>

<div class="modules">
  <!-- 将ul放在循环外，确保页面只有一个module-list -->
  <ul id="module-list">
    <% for (const module of modules) {%>
      <li>
        <input type="checkbox" name="module" id="<%= module._id %>" value="<%= module._id%>"/>
        <label for="<%= module._id%>"><%= module.moduleCode%></label>
      </li>
    <% } %>
  </ul>
</div>

3. 修改前端脚本，动态获取并渲染数据 #

把硬编码的内容替换为调用后端API，获取真实模块数据后渲染：

const yearSelectorElement = document.getElementById('year');
const moduleListElement = document.getElementById('module-list');

async function updateModules() {
  const selectedYear = yearSelectorElement.value;
  try {
    // 调用后端API，传递选中的年级参数
    const response = await fetch(`/modules/by-year?year=${selectedYear}`);
    const modules = await response.json();
    
    // 清空现有列表
    moduleListElement.innerHTML = '';
    
    // 遍历数据生成列表项
    modules.forEach(module => {
      const li = document.createElement('li');
      li.innerHTML = `
        <input type="checkbox" name="module" id="${module._id}" value="${module._id}"/>
        <label for="${module._id}">${module.moduleCode}</label>
      `;
      moduleListElement.appendChild(li);
    });
  } catch (error) {
    console.error('加载模块失败:', error);
    moduleListElement.innerHTML = '<li>加载模块出错，请稍后重试</li>';
  }
}

// 可选：页面加载时默认渲染初始数据
// updateModules();

yearSelectorElement.addEventListener('change', updateModules);

内容的提问来源于stack exchange，提问作者Alpha-Sanz