[英]Javascript - Create element select from input
I am learning using the events via "nodes" system. 我正在通过“节点”系统学习使用事件。 But I always have problems with select and options item.
但是我总是对select和options项目有疑问。 The code is good, it works on my local dev.
代码很好,可以在我的本地开发人员上使用。 Unfortunately, I had some bugs in JsFiddle =(
不幸的是,我在JsFiddle中有一些错误=(
Here is the situation. 这是情况。
We have an input, when I type (3 for exemple) and click to "add", I have two inputs (name + surname) that appears for 3 persons in the div "childrenContainer". 我们有一个输入,当我键入(例如3)并单击以“添加”时,我有两个输入(名称+姓氏)在div“ childrenContainer”中针对3个人出现。
Here is the HTML 这是HTML
<h1>Book</h1>
<label for="nbEnfants">Number : </label>
<input type="text" id="nbEnfants">
<button id="addChildren">Add</button>
<div id="childrenContainer">
Here is the Javascript 这是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"));
}
}
);
This code is good, but I need to add a drop down (select options) for the age of children (1 to 12). 这段代码不错,但是我需要为孩子的年龄(1至12岁)添加一个下拉列表(选择选项)。 Adding inputs is good for me, but adding a select is a little difficult, because I need another loop into this one for adding the age for each children.
添加输入对我来说是好的,但是添加选择项有点困难,因为我需要在此循环中添加另一个循环以增加每个孩子的年龄。
I wrote a little idea if it helps you 我写了一个小主意是否对您有帮助
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"));
}
But I don't know how to add a entire drop down after my click event and for each children with his inputs. 但是我不知道如何在点击事件之后为每个带有他的输入的孩子添加整个下拉列表。
I can give you more details if you need help =) 如果您需要帮助,我可以为您提供更多详细信息=)
I need explanations if you have a solution, not only the solution, because I will not learn like this =D 如果您有解决方案,我不仅需要解决方案,还需要解释,因为我不会像这样= D学习
Thank you for taking time on my issue =) 感谢您抽出宝贵时间来解决我的问题=)
Use a different iterator for adding options to the select list 使用其他迭代器将选项添加到选择列表
Since i
is already used to add each set of inputs, use another variable (eg var j
) when adding options to the select list. 由于已经使用
i
来添加每组输入,因此在将选项添加到选择列表时,请使用另一个变量(例如var j
)。
Create the select list, then add options, then add the list to the DOM 创建选择列表,然后添加选项,然后将列表添加到DOM
When creating a new select list, we want the id attribute to be unique (refer to the MDN documentation as to why it should be unique) - and perhaps the name attribute should be unique too, especially the form is being submitted with traditional methods (eg regular form submit, not AJAX) 创建新的选择列表时,我们希望id属性是唯一的(请参阅MDN文档以了解为什么它应该是唯一的)-也许name属性也应该是唯一的,尤其是表单是使用传统方法提交的(例如常规表格提交,而不是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
Additionally, you can make the type attribute of the Number input number
so it will only allow numbers. 此外,您可以将Number 输入
number
为type属性,以便仅允许数字输入 。 If you wanted to only allow a range of integers, you could use a select list for that instead. 如果只允许整数范围,则可以使用选择列表代替。
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")); } } );
<h1>Book</h1> <label for="nbEnfants">Number :</label> <input type="number" id="nbEnfants"> <button id="addChildren">Add</button> <div id="childrenContainer">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.