如何使用 jQuery 动态添加包含 EJS 的页面元素？

Question

我有一些来自 MySQL 数据库的数据，当我使用 Express 渲染它时，我将这些数据传递给 EJS 模板。从该数据中，我需要能够创建一个选择器元素，用户可以选择添加更多选择器元素（使用相同的数据）。我还需要一种方法来以某种方式识别每个选择器（在 jQuery 中生成它时，我尝试通过分配一个变量作为选择器的 id 和 name 属性的一部分来做到这一点），以便我以后可以将它们全部交还给数据库并根据收到的数据在另一个表中创建条目。

但是，当我尝试重新使用 EJS 变量时，不会生成代码，而是将 EJS 代码作为文本返回。我知道这是因为 EJS 是由服务器渲染的，所以我不能在前端以相同的方式使用它；但是，我一直无法找到有关如何解决此问题的解释。我是 Node 和 EJS 以及一般后端编程的新手，因此我们将不胜感激。

初始选择器和添加按钮的 HTML 代码：

<div class="form-group" id="tasks-form">
  <label>Tasks</label>
  <select class="form-control" id="task1" name="task1">
    <% tasktypes.forEach (function (tasktype) { %>
      <option value="<%- tasktype.taskid %>"><%- tasktype.description %></option>
    <% }); %>
  </select>
  <button type="button" class="btn btn-primary" id="add-task">Add Task</button>
</div>

JS/JQuery 脚本：

$(document).ready(function() {
  var formsAllowed = 20;
  var currentForms = 1;

  $('#add-task').click(function(){
    if (currentForms < formsAllowed) {
      currentForms ++;
      $('#tasks-form').append('\
        <select class="form-control" id="task' + currentForms + '" name="task' + currentForms + '"> \
          <% tasktypes.forEach (function (tasktype) { %> \
           <option value="<%- tasktype.tasktypeid %>"><%- tasktype.description %></option> \
          <% }); %> \
        </select>  \
        ');
    }
  });
});

Answer 1

如果您的选择元素始终相同，您可以使用像这样的 jquery 函数克隆原始选择框吗？

https://api.jquery.com/clone/

然后使用 JavaScript 为新克隆的元素分配一个新的 id 属性？

我对 jQuery 不是很熟悉，但它似乎是一个合乎逻辑的选择。

但是，如果您不希望选择框中的选项完全相同，那么您需要确保在呈现 HTML 页面时将所需的所有数据加载到该页面中。

我的方法是将您的数据存储为 JSON 并将其存储在 DOM 中的隐藏元素中（输入字段对此很有用，因为您可以只使用 value 属性）。然后，您可以使用常规前端 JavaScript 访问您的数据。