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访问您的数据。

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

1 个答案: