创建带有输入金额值的表单下拉列表

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。然后，它创建元素 ID: 内元素的副本readroot，并将其附加到 ID: 的元素部分writeroot。当您单击具有“x”值的按钮时，它将触发一个removeChild()函数并删除连接到“x”按钮的行。