javascript下拉列表等於相同數量的文本框

Question

我有一個包含數字1-10和繼續按鈕的下拉列表。
我想要的是，當用戶選擇一個特定的號碼，並且用戶點擊繼續按鈕時，它應該顯示與下拉列表中所選數量相等的多個文本框。

是否可以用循環來完成？或者有什麼建議？

Answer 1

這是一種選擇 - 使用jQuery COS它比冷得多隻是普通的JS - 首先確定文本框的數量需要基於選擇列表的值。然後用所需數量的文本框創建一個字符串，然後將第三個HTMl應用於空格。請注意，將文本框構建爲字符串然後將其添加到div的原因是，這隻需要對DOM進行一次更改 - 在每次迭代時都會需要多次更改DOM。如果你不想使用jQuery，那很好 - 正如其他答案所展示的那樣 - 所有在jQ中完成的事情都可以在JS中完成 - 但它的使用更有趣。

$(document).ready(function(){ 
 
    $('#selection').change(function(){ 
 
    var num = $(this).val(); 
 
    var HTML=''; 
 
    for(i = 0; i < num; i++){ 
 
     HTML += "<input type='text' name='textBox"+i+"' /><br/>" 
 
     } 
 
    $('#newDiv').html(HTML); 
 
    })     
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for = "selection"> Enter the number of textboxes required</label> 
 
<select id="selection"> 
 
    <option disabled selected></option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    </select> 
 

 
<hr/> 
 
<div id="newDiv"></div>

Answer 2

使用addEventListener，您可以生成文本框爲：

function create(param) { 
    //'use strict'; 
    var i, target = document.getElementById('screens'); 
    target.innerHTML = ''; 

    for (i = 0; i < param; i += 1) { 
     target.innerHTML += '<input type="text" name="Fname"><br /><br />'; 
    } 
} 

document.getElementById('createTextboxes').addEventListener('change', function() { 
    create(this.value); 
}, false); 

JsFiddle Demo

Answer 3

試試這個...純JS和快速

function creator(){ 
 
var tb = document.getElementById("generator").value 
 
var area = document.getElementById("tbArea"); 
 

 
var childcount = area.childNodes.length; 
 
    if(childcount != 0) 
 
    { for(var i = childcount-1; i > -1;i--)  
 
      { 
 
    \t \t \t \t \t \t area.removeChild(area.childNodes[i]); 
 
      } 
 
    } 
 
for(var i =0; i < tb; i++){ 
 
    var tbox = document.createElement('input'); 
 
    document.getElementById("tbArea").appendChild(tbox); 
 
     } 
 

 
} 
 

 
document.getElementById("generator").onchange = creator;

<select id='generator'> 
 
    <option value='1'>1</option> 
 
    <option value='2'>2</option> 
 
    <option value='3'>3</option> 
 
    <option value='4'>4</option> 
 
    <option value='5'>5</option> 
 
    <option value='6'>6</option> 
 
    <option value='7'>7</option> 
 
    <option value='8'>8</option> 
 
    <option value='9'>9</option> 
 
    <option value='10'>10</option> 
 
</select> 
 

 
<div id='tbArea'></div>