Question

我正在创建订单，我是新编程。我们的想法是，客户可以添加新的盒子来订购具有数量的新产品。使用此代码，我可以创建一个带有产品的盒子，但我没有在产品盒旁边放一个数量框。我想为产品创建一个，为数量创建另一个，当客户点击新产品时，创建新产品列表和数量列表或数量字段以输入值。我试着复制文件。创建...并更改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

我的建议是你将要克隆的元素包装在div中，并在用户单击按钮然后将其放在dynamicInput下时克隆它

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' />

Answer 2

我想感谢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');" />

谢谢大家，这个网站很棒。

在Javascript中添加带有选项的输入类型选择

2 个答案: