使用javaScript创建新的输入字段

时间:2018-09-22 19:47:54

标签: javascript html

我是javaScript的新手,现在不知道如何实现它。我在HTML中使用数字进行“选择”。

<select class="form-control"  id="select" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

当用户在此选择中选择数字时,js将创建用户选择的尽可能多的输入字段,例如这张图片[

enter image description here

该怎么做?

2 个答案:

答案 0 :(得分:1)

类似的事情可能会帮助

function createFileds(ele) {
  let form = document.getElementById("form");
  form.innerHTML = '';
  for(let i = 0; i < ele.value; i++) {
    form.innerHTML += '<Input name="input ' + i + '">';
  }
}
<select class="form-control"  id="select" onchange="createFileds(this)">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<form id="form"></form>
  

答案 1 :(得分:1)

这只是为了让您了解操作方法。

addImputs(select);


select.addEventListener("change", ()=>{
  
  addImputs(select);
  
})

function addImputs(select){
 let num = parseInt(select.options[select.selectedIndex].value);
  imputs.innerHTML = "";
  for(let i = 0; i < num; i++){
  let imp = document.createElement("input");
  imp.setAttribute("type", "text");
  imputs.appendChild(imp)
}
}
<select class="form-control"  id="select" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<div id="imputs"></div>