Question

我有一个下拉列表，其中包含数字1-10和一个继续按钮我想要的是，当用户选择一个特定的号码并且用户点击“继续”按钮时，它应该显示一个等于下拉列表中所选号码的文本框。

可以用循环吗？或任何建议？

Answer 1

使用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 2

这是一个选项 - 使用jQuery cos比简单的JS更酷 - 首先根据选择列表的值确定所需的文本框数量。然后创建一个包含所需数量的文本框的字符串和第三个 - 将该HTMl应用于空div。请注意，将文本框构建为字符串然后将其添加到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 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--)    
           { 
 						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>

javascript下拉列表等于相同数量的文本框

3 个答案: