Question

我的MySQL数据库在<select>和qty字段中提供了一个项目列表（以及它们的整数ID），以便在我的网络表单上使用（样式为display: none，因此它被隐藏）。但是：我希望用户能够在表单中选择他想要输入的这种类型的选择 - 我如何动态地进行多次选择？

示例：库存中的产品是橙子，香蕉和桃子。有一个选择标记：

<select name="p[0]">
    <option value="2">Orange</option>
    <option value="23">Banana</option>
    <option value="31">Peach</option>
</select>
QTY <input type="text" name="qty[0]" />

现在我想添加另一个下拉列表，允许用户在订购一类，两类或三类产品之间进行选择。他可以选择2，然后将上述代码的两个副本插入到DOM中，这样他就可以输入两个产品选择和数量。（脚本会给他们命名p[0]和p[1]等。）

有人可以帮我吗？

Answer 1

最简单的方法是根据需要多次克隆已有的节点（而不是通过document.createElement()或innerHTML创建新的DOM。

首先，使用具有已知ID的div围绕现有的<select>和<input>。此外，您还想添加另一个DIV以将重复的输入放入：

<div id="template">
  <select name="p[0]"> ... </select>
  QTY: <input name="qty[0]"/>
</div>
<div id="copies">
</div>

现在，创建一个将模板复制N次的函数：

function makeCopies(num) {
  var template = document.getElementById('template');
  var output = document.getElementById('copies');

  // Delete existing nodes.
  output.innerHTML = '';

  // We start with 1, not 0, because we already have the template.
  for (var i = 1; i < num; i++) {
    var copy = template.cloneNode(true);
    // Change the input names according to index.
    copy.getElementsByTagName('select')[0].name = 'p[' + i + ']';
    copy.getElementsByTagName('input')[0].name = 'qty[' + i + ']';
    output.appendChild(copy);
  }   
}

来自PHP的JavaScript DOM动态表单

1 个答案: