根据用户选择的选项值，将 MondoDB 中的条件内容显示到列表元素

Question

我正在尝试在网页上有条件地显示 MongoDB 中的文档。用户应该从选择元素中选择一个选项，这将相应地过滤文档。如果用户选择第一年选项，则使用 ejs 模板仅在页面上显示数据库字段为“第一年”的项目，如下图所示

我设法从数据库中提取所有文档，并能够将它们全部显示在 ejs 模板上。我还设法在选择选项上添加一个事件侦听器，以在模板上呈现条件信息。我只是不确定如何将数据文档连接到选择元素。

这是我的registration.ejs文件

        <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">
          <% for (const module of modules) {%>
            <ul id="module-list">
              <li>
                <!-- <input type="checkbox" name="module" id="<%= module._id %>" value="<%= module._id%>"/>
                <label for="<%= module._id%>"><%= module.moduleCode%></label> -->
              </li>
            </ul>        
          <% } %>
      </div>

这是我的浏览器端脚本

const yearSelectorElement = document.getElementById('year');

async function updateModules() {
  if (yearSelectorElement.value == "0") {  
    document.getElementById('module-list').innerHTML = "<li>Item1</li>"
  } else if (yearSelectorElement.value == "1") {
    document.getElementById('module-list').innerHTML = "<li>Item2</li>"
  } else if (yearSelectorElement.value == "2") {
    document.getElementById('module-list').innerHTML = "<li>Item3</li>"
  } else {
    document.getElementById('module-list').innerHTML = "<li>Item4</li>"
  }
}

yearSelectorElement.addEventListener('change', updateModules);

这是我的注册控制器文件

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 });
 
};

module.exports = {
  getRegistration: getRegistration,
  
}

Answer 1

我自己设法解决了这个问题。我将 MongoDB 中的数据渲染到我的 EJS 模板中。然后，我使用几个具有隐藏类的 div 过滤数据，然后使用 select 元素添加或删除 div 上的类以显示或隐藏内容。

这是我现在的注册EJS文件

        <select id="yearSelector">
          <option value="">Select a year</option>
          <option value="year1">Year 1</option>
          <option value="year2">Year 2</option>
          <option value="year3">Year 3</option>
          <option value="year4">Year 4</option>    
        </select>

        <div id="year1" class="hidden">
          <ul>
            <% for (const module of modules) { %>
              <% if (module.year === 1) { %>
                <li>
                  <input type="checkbox" id="<%= module.moduleCode%>" value="<%= module.moduleCode%>"> 
                  <label for="<%= module.moduleCode%>"><%= module.moduleCode%></label>
                </li>
              <% } %>
            <% } %>
          </ul>
        </div>
        <div id="year2" class="hidden">
          <ul>
            <% for (const module of modules) { %>
              <% if (module.year === 2) { %>
                <li>
                  <input type="checkbox" id="<%= module.moduleCode%>" value="<%= module.moduleCode%>"> 
                  <label for="<%= module.moduleCode%>"><%= module.moduleCode%></label>
                </li>
              <% } %>
            <% } %>
          </ul>
        </div>
        <div id="year3" class="hidden">
          <ul>
          <% for (const module of modules) { %>
            <% if (module.year === 3) { %>
              <li>
                <input type="checkbox" id="<%= module.moduleCode%>" value="<%= module.moduleCode%>"> 
                  <label for="<%= module.moduleCode%>"><%= module.moduleCode%></label>
              </li>
            <% } %>
          <% } %>
          </ul>
        </div>
        <div id="year4" class="hidden">
          <ul>
            <% for (const module of modules) { %>
              <% if (module.year === 4) { %>
                <li>
                  <input type="checkbox" id="<%= module.moduleCode%>" value="<%= module.moduleCode%>"> 
                  <label for="<%= module.moduleCode%>"><%= module.moduleCode%></label>
                </li>
              <% } %>
            <% } %>
          </ul>
        </div>

浏览器端脚本：

const yearSelector = document.getElementById("yearSelector");
const year1Element = document.getElementById("year1");
const year2Element = document.getElementById("year2");
const year3Element = document.getElementById("year3");
const year4Element = document.getElementById("year4");

yearSelector.addEventListener("change", ()=> {
  if (yearSelector.value === "year1") {
    year1Element.classList.remove("hidden");
    year2Element.classList.add("hidden");
    year3Element.classList.add("hidden");
    year4Element.classList.add("hidden");
  } else if (yearSelector.value === "year2") {
    year1Element.classList.add("hidden");
    year2Element.classList.remove("hidden");
    year3Element.classList.add("hidden");
    year4Element.classList.add("hidden");
  } else if (yearSelector.value === "year3") {
    year1Element.classList.add("hidden");
    year2Element.classList.add("hidden");
    year3Element.classList.remove("hidden");
    year4Element.classList.add("hidden");
  } else if (yearSelector.value === "year4") {
    year1Element.classList.add("hidden");
    year2Element.classList.add("hidden");
    year3Element.classList.add("hidden");
    year4Element.classList.remove("hidden");
  }
});