mongodb 根据用户选择的选项值，将MondoDB中的条件内容转换为列表元素

jvidinwx 于 2023-10-16 发布在 Go

关注(0)|答案(1)|浏览(72)

我正在尝试在网页上有条件地显示来自MongoDB的文档。用户应该从选择元素中选择一个选项，然后相应地过滤文档。如果用户选择了第一年选项，那么只有数据库字段为“第一年”的项目才会显示在使用ejs模板的页面上，如下图所示
enter image description here
我设法从数据库中提取了所有文档，并能够在ejs模板上显示它们。我还设法在select选项上添加了一个事件侦听器，以便在模板上呈现条件信息。我只是不确定如何将数据文档连接到select元素。
这是我的注册.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,
  
}

mongodb

来源：https://stackoverflow.com/questions/77084739/displaying-conditional-content-from-mondodb-to-a-list-element-according-to-an-o

1条答案

按热度按时间

ycl3bljg1#

我自己想出来的。我把数据从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");
  }
});

赞(0）回复(0）举报 2023-10-16

我来回答

mongodb 根据用户选择的选项值，将MondoDB中的条件内容转换为列表元素

1条答案

相关问题

热门标签

最新问答