JavaScriptのドロップダウンリストと同じ数のテキストボックス

Question

数字が1〜10のドロップダウンリストと続行ボタンがあります。
ユーザーが特定の番号を選択してユーザーが続行ボタンをクリックすると、ドロップダウンリストで選択した数のテキストボックスが表示されます。

ループで行うことは可能ですか？または任意の提案？ 、あなたにテキストボックスを生成することができますaddEventListenerを使用

Answer 1

がオプションである最初のテキストボックスの数を決定します選択リストの値に基づいて必要です。その後、必要な数のテキストボックスを含む文字列を作成し、3番目のHTMlを空のdivに適用します。テキストボックスを文字列として構築してdivに追加する理由は、DOMに1回の変更しか必要ないということです。各反復で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

： - そのよりずっと涼しい単なるJSのcosのjQueryを使って - ここ

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>