javascript - 如何使用 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 访问您的数据。