如何在 EJS 中动态添加选项标签？答案

【问题标题】：How do I dynamically add option tags in EJS?如何在 EJS 中动态添加选项标签？
【发布时间】：2014-08-20 02:02:07
【问题描述】：

我觉得这很草率，而这正是 EJS 试图阻止的。有没有办法在不连接循环字符串的情况下添加值和选项？

    <!-- developer field option values -->
    <% var optionstring = "";
    for (var i = 0; i < developers.length; i++){
      optionstring += '<option value="' + developers[i]._id + '">' + developers[i].firstname
    }

    %>



    <% for (var i = 0; i < users.length; i++){ %>
      <tr>
        <td><%= users[i].firstname %></td> 
        <td><select class="assign_dev"><option value="unassigned">unassigned<%- optionstring %></select></td>
        <td><select class="ticket_status"><option value="open">Open</option><option value="closed">Closed</option></select></td>
      </tr>

【问题讨论】：

标签： node.js express ejs

【解决方案1】：

生成动态选项和文本字段 *

    <% for(var i = 0; i < filterData.length; i++) { %>
         <select name="hour" >
        <% for(var j = 0; j < filterData.length; j++) { %>
        <option value='<%= filterData[j] %>'><%= filterData[j] %></option>
         <% } %>
      <input type="text" id="sssss">
          </select>
   <% } %>

【讨论】：

【解决方案2】：

您可以在选择 without 循环中填写选项。我使用 Array.prototype.map 函数来处理每个项目（参见下面的示例）

<select id="developer" name="developer">
<option id="0"> Please choose a developer </option>
<% developers.map(item=> { %>
 <option id="<%= item._id%>"> <%= item.firstname %> </option>
<% }) %>
<select>

【讨论】：

【解决方案3】：

如果您的目标是避免连接字符串，那么您可以关闭代码块，插入 html，然后重新打开代码块。

<% for (var i = 0; i < users.length; i++){ %>
    <tr>
        <td><%= users[i].firstname %></td> 
        <td>
            <select class="assign_dev">
                <option value="unassigned">unassigned</option>
                <%
                    for (var j = 0; j < developers.length; j++){
                        %><option value="<%= developers[j]._id %>"><%= developers[j].firstname %><%
                    }
                %>
            </select>
        </td>
        <td>
            <select class="ticket_status">
                <option value="open">Open</option>
                <option value="closed">Closed</option>
            </select>
        </td>
    </tr>
%>

但是，我认为真正的目标不应该是避免串联。目标应该是使代码清晰高效（只要效率不牺牲清晰度）。在我看来，您的原始代码更好。由于您需要一遍又一遍地列出相同的选项，因此在前面的循环中创建一次列表，然后在第二个循环中重用该缓存字符串比嵌套循环更有效和更清晰。

【讨论】：

我还想添加一个默认的开发者值，我将从数据库中提取。我认为你列出的方式是我能做到的唯一方式。感谢您的回复。
刚试了代码。它在底部缺少一个右括号。但是，当我添加右括号时，循环不会迭代。
当我删除嵌套循环时，外部循环会迭代。
@MichaelSpatafore，我没有意识到我有相同的var i 作为循环变量。当循环分开时这很好，但是当它们嵌套时，内部循环覆盖了外部循环的迭代器变量。我修复了上面的代码，将j 用于内部循环。