使用Javascript中的选项添加输入类型选项

我正在创建订单表单，我是新编程人员。这个想法是，客户可以添加新箱子来订购具有数量的新产品。使用此代码我可以创建一个包含产品的包装盒，但是我没有在产品包装箱旁放置一个包装盒。我想为产品创建一个，为数量创建另一个，当客户点击新产品创建新产品列表和数量列表或数量字段以输入数值时。我尝试复制document.create ...并更改div，但我不知道如何指向另一个选择。我很感谢你们能帮助我。谢谢。使用Javascript中的选项添加输入类型选项

的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');" />

来源

2017-02-04 Evandro

我的建议是，你包的元素，你想克隆一个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' />

来源

2017-02-04 05:58:24

我试过这种方式，但没有工作，所以我改变了一些东西，并完美地工作。非常感谢你，因为我使用了你的想法。这解决了我的问题。 – Evandro

我不知道，当我把事件处理程序放在按钮标记中时，它不起作用。所以我把它们放在脚本中，所以你现在可以在这里试试这个demo ...哈哈。你应该试试jquery，那太棒了。 –

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

谢谢你们，这个网站是惊人的。

来源

2017-02-04 22:02:22 Evandro

:)这个网站很棒，是啊，我在这里学到很多... –

使用Javascript中的选项添加输入类型选项

回答

相关问题