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

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”按钮的行。