使用输入金额值创建表单下拉列表

Question

我为我制作的表格寻求帮助或建议：模板设计：

我想创建一个表单，其中项目列表可以在下拉列表中选择可用项目，然后给它指定使用的数量。 然后有一个添加按钮来添加另一个项目。 我很困惑如何为这个设计制作 html 表单和 javascript/ajax

Answer 1

您可以使用 JavaScript 的 onclick 事件和节点来复制组件和删除组件。

 var counter = 0; document.getElementById('moreFields').onclick = moreFields; function moreFields() { counter++; var newFields = document.getElementById('readroot').cloneNode(true); newFields.id = ''; newFields.style.display = 'block'; var newField = newFields.childNodes; for (var i=0;i<newField.length;i++) { var theName = newField[i].name if (theName) newField[i].name = theName + counter; } var insertHere = document.getElementById('writeroot'); insertHere.parentNode.insertBefore(newFields,insertHere); } window.onload = moreFields;

 <div id="readroot" style="display: none"> <input type="button" value="x" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br /> <input name="amount" value="title" /> <select name="items"> <option>Items</option> <option value="cable">Cable</option> <option value="rj45">rRJ45</option> </select> <select name="type"> <option>type</option> <option value="m">Cable</option> <option value="pcs">pcs</option> </select> </div> <form method="post" action="/cgi-bin/show_params.cgi"> <span id="writeroot"></span> <input type="button" id="moreFields" value="Add more" /> </form>

当您单击“添加更多”按钮时，它将触发moreFields() 。 在该函数内部，它保留当前使用counter变量创建的行的counter 。 然后它创建元素 ID 中元素的副本： readroot并将其附加到 ID 为writeroot的元素部分。

当您单击具有“x”值的按钮时，它将触发removeChild()函数并删除连接到“x”按钮的行。

参考资料：点此