在Javascript中添加输入类型select with选项

Question

我正在创建一个订单，我正在进行新的编程。其思想是，客户可以添加新的盒子，以订购一个新的产品与数量。使用这段代码，我可以创建一个包含产品的框，但我没有在产品框旁边放一个数量框。我想为产品创建一个，为数量创建另一个，当客户单击New Product时，创建一个New Product列表和数量列表或数量字段以输入值。我试着复制了文件。创建...并更改div,但我不知道如何指向另一个选择。如果你们能帮我-我很感激。谢谢.

JavaScript

 var choices = [
    "Product1",
    "Product2",
    "Product3"];

function addInput(divName) {


    var newDiv = document.createElement('div');
    var selectHTML = "";
    selectHTML="<select>";
    for(i = 0; i < choices.length; i = i + 1) {
        selectHTML += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";}
    selectHTML += "</select>";
    newDiv.innerHTML = selectHTML;
    document.getElementById(divName).appendChild(newDiv);


    var Div = document.createElement('div');
    var selectHTML = "";
    selectHTML="<select>";
    for(i = 0; i < choices.length; i = i + 1) {
        selectHTML += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";}
    selectHTML += "</select>";
    Div.innerHTML = selectHTML;
    document.getElementById(divName).appendChild(Div);

HTML

    <form class="new" method="post" action="phppage">

    <fieldset id="products">  <legend> PRODUCTS </legend>

        <select name="tProduct" id="cProduct">
            <optgroup label="GALLON BAG">
                <option>Product1</option>
                <option>Product2</option>
                <option>Product3</option>
                </optgroup>
            </select>
        &nbsp;<label for="cQuantity">Quantity:<span style="color:red">*</span></label>&nbsp;<input type="number" name="tQuantity" id="cQuantity" placeholder="Qnt" min="0" max="9999" required/>


        <div id="dynamicInput"></div>
        <input type="button" value="New Product" onclick="addInput('dynamicInput');" />

Answer 1

我想对Z.Better说声谢谢，因为我用了他发帖的想法，所以解决了这个问题，我只是做了一些改变。按照下面与我一起工作的脚本操作。我现在在用。我之所以分享这一点，是因为如果有人有这种怀疑，这就是解决之道。

    <script>
    function addInput(divName) {
        var copy = document.getElementById('forclone').cloneNode(true);
        document.getElementById(divName).appendChild(copy);
    }

</script>

而且

    <form class="new" method="post" action="phppage">

    <fieldset id="products">  <legend> PRODUCTS </legend>
        <div id = 'forclone'>
            <select name="tProduct" id="cProduct">
                <optgroup label="GALLON BAG">
                    <option>Product1</option>
                    <option>Product2</option>
                    <option>Product3</option>
                </optgroup>
            </select>

            &nbsp;<label for="cQuantity">Quantity:<span style="color:red">*</span></label>&nbsp;<input type="number" name="tQuantity" id="cQuantity" placeholder="Qnt" min="0" max="9999" required/>
        </div>



        <div id="dynamicInput"></div>
        <input type="button" value="New Product" onclick="addInput('dynamicInput');" />

null

谢谢你们，这个网站太棒了。

Answer 2

我的建议是，您将想要克隆的元素包装在一个div中，当用户单击按钮时克隆它，然后将它放在dynamicInput下

null

js lang-js prettyprint-override">function addInput(divName) {
    var copy = document.getElementById('forclone').cloneNode(true);
    document.getElementById(divName).appendChild(copy);
}

document.getElementById('button').onclick = function(){
    addInput('dynamicInput');
  }

 <form class="new" method="post" action="phppage">

    <fieldset id="products">  <legend> PRODUCTS </legend>
        <div id = 'forclone'>
        <select name="tProduct" id="cProduct">
            <optgroup label="GALLON BAG">
                <option>Product1</option>
                <option>Product2</option>
                <option>Product3</option>
                </optgroup>
            </select>
            
                    &nbsp;<label for="cQuantity">Quantity:<span style="color:red">*</span></label>&nbsp;<input type="number" name="tQuantity" id="cQuantity" placeholder="Qnt" min="0" max="9999" required/>
            </div>



        <div id="dynamicInput"></div>
        <input type="button" value="New Product" id = 'button' />