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

【问题标题】：Create Form dropdown list with input amount value使用输入金额值创建表单下拉列表
【发布时间】：2020-10-31 03:09:35
【问题描述】：

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

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

【问题讨论】：

请提供任何代码来帮助您解决问题，否则没有人会为您完成。

【解决方案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 的元素 Section。

当你点击带有“x”值的按钮时，它会触发一个removeChild()函数并移除连接到“x”按钮的行。

参考：Click Here

【讨论】：