Question

我正在学习通过“节点”系统使用事件。但我总是遇到选择和选项项目的问题。代码很好，它适用于我的本地开发。不幸的是，我在JsFiddle中遇到了一些错误=（

情况就是这样。

我有一个输入，当我输入（例如3）并点击“添加”时，我有两个输入（名称+姓氏），在div“childrenContainer”中为3个人显示。

这是HTML

<h1>Book</h1>
    <label for="nbEnfants">Number : </label>
    <input type="text" id="nbEnfants">
    <button id="addChildren">Add</button>
    <div id="childrenContainer">

以下是Javascript

    document.getElementById("addChildren").addEventListener('click',
    function(){
        var nbEnfants = document.getElementById("nbEnfants").value;
        var childrenContainer = document.getElementById("childrenContainer");

        for(var i=0; i<nbEnfants; i++){

            //First added Input
            childrenContainer.appendChild(document.createTextNode("Name : " + (i+1) + " "));
            var input = document.createElement("input");
            childrenContainer.appendChild(input);
            input.setAttribute('type', 'text');
            childrenContainer.appendChild(document.createElement("br"));

            //Second input
            childrenContainer.appendChild(document.createTextNode("Surname : " + (i+1) + " "));
            var input2 = document.createElement("input");
            childrenContainer.appendChild(input2);
            input2.setAttribute('type', 'text');

            childrenContainer.appendChild(document.createElement("br"));
            childrenContainer.appendChild(document.createElement("br"));

        } 
    }
);

此代码很好，但我需要为孩子的年龄（1到12）添加一个下拉列表（选择选项）。添加输入对我来说很有用，但添加一个选择有点困难，因为我需要另外一个循环来添加每个孩子的年龄。

我写了一个小小的想法，如果它可以帮助你

for(var i = 0; i<12; i++){
                    var select = document.createElement("select");
                    select.setAttribute("name", "selectChildren");
                    select.setAttribute("id", "selectChildren");
                    var option = document.createElement("option");
                    option.setAttribute("value", "value");
                    option.innerHTML = i;
                    select.appendChild(option);
                    childrenContainer.appendChild(document.createElement("br"));
                }

但我不知道如何在点击事件后为每个孩子添加整个下拉菜单。

如果您需要帮助，我可以提供更多详细信息=）

如果您有解决方案，我需要解释，而不仅仅是解决方案，因为我不会像这样学习= D

感谢您抽出时间讨论我的问题=）

Answer 1

使用其他迭代器将选项添加到选择列表

由于i已用于添加每组输入，因此在向选择列表添加选项时，请使用其他变量（例如var j）。

创建选择列表，然后添加选项，然后将列表添加到DOM

创建新的选择列表时，我们希望 id 属性是唯一的（请参阅MDN documentation至于它应该唯一的原因） - 也许名称属性也应该是唯一的，特别是表单是用传统方法提交的（例如常规表单提交，而不是AJAX）

var select = document.createElement("select");
select.setAttribute("name", "selectChildren");
select.setAttribute("id", "selectChildren" + i);
for (var j = 0; j < 12; j++) {
     var option = document.createElement("option");
     option.setAttribute("value", j+1);
     option.innerHTML = j + 1;
     select.appendChild(option);
}
childrenContainer.appendChild(select); //Add the select list to the DOM

此外，您可以设置数字input number的类型属性，以便它只允许数字。如果您只想允许一系列整数，则可以使用选择列表。

＆＃13;

 document.getElementById("addChildren").addEventListener('click',
   function() {
     var nbEnfants = document.getElementById("nbEnfants").value;
     var childrenContainer = document.getElementById("childrenContainer");

     for (var i = 0; i < nbEnfants; i++) {

       //First added Input
       childrenContainer.appendChild(document.createTextNode("Name : " + (i + 1) + " "));
       var input = document.createElement("input");
       childrenContainer.appendChild(input);
       input.setAttribute('type', 'text');
       childrenContainer.appendChild(document.createElement("br"));

       //Second input
       childrenContainer.appendChild(document.createTextNode("Surname : " + (i + 1) + " "));
       var input2 = document.createElement("input");
       childrenContainer.appendChild(input2);
       input2.setAttribute('type', 'text');

       childrenContainer.appendChild(document.createElement("br"));
       childrenContainer.appendChild(document.createElement("br"));
       var select = document.createElement("select");
       select.setAttribute("name", "selectChildren");
       select.setAttribute("id", "selectChildren" + i);
       for (var j = 0; j < 12; j++) {
         var option = document.createElement("option");
         option.setAttribute("value", "value");
         option.innerHTML = j + 1;
         select.appendChild(option);
       }
       childrenContainer.appendChild(select);
       childrenContainer.appendChild(document.createElement("br"));

     }
   }
 );

＆＃13;

 <h1>Book</h1>
<label for="nbEnfants">Number :</label>
<input type="number" id="nbEnfants">
<button id="addChildren">Add</button>
<div id="childrenContainer">

＆＃13;

Javascript - 从输入中创建元素选择

1 个答案: