输入数字并根据输入的数字显示输入字段

Posted 2023-05-09

【中文标题】输入数字并根据输入的数字显示输入字段

【英文标题】：Input number and display the Input Fields according to the number inputed

【发布时间】：2019-02-21 15:55:15

【问题描述】：

我想根据输入的数字显示输入框的数量。

我的代码不工作

<input id="howmany" />
<div id="boxquantity"></div>

jQuery/javascript

$(function() 
    $('#howmany').change(function()
        for(i=0; i < $("#howmany").value; i++)
        
            $('#boxquantity').append('<input name="boxid[]" type="file" id="boxid[]" size="50"/>'); 
        
    );
);

【问题讨论】：

您正在添加新元素。您永远不会删除任何以前附加的元素

那么问题是什么？ console.log()是你的朋友

同样使用.val() 而不是.value，因为jQuery 不直接公开属性

并且不要重复像boxid[]这样的ID

【参考方案1】：

我认为代码的问题在于它在 jquery 对象上使用了 .value。我用 $("#howmany").val()

替换了 $("#howmany").value

【参考方案2】：

工作代码，没有 jQuery。

将 html 构建到一个变量中，然后一次性附加到 DOM。

var boxes = "";

document.getElementById("howmany").onchange = function() 
  boxes = "";
  var howmany = document.getElementById("howmany").value;
  for(i=0;i<howmany;i++) 
    boxes += '<b>File ' + i + '</b>: <input type="file" id="box' + i + ' name="box' + i + ' /><br/>';
  
  console.log(boxes);
  document.getElementById("boxquantity").innerHTML = boxes;

这是JSBin link。

【参考方案3】：

将value 替换为val。您可以将$("#howmany").value 替换为$(this).val()。每个输入也应该有唯一的id

$(function() 
  $('#howmany').change(function() 
    for (let i = 0; i < $(this).val(); i++) 
      $('#boxquantity').append('<input name="boxid[]" type="file" id="boxid[]_' + i + '" size="50"/>');
    
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="howmany" />
<div id="boxquantity"></div>

【参考方案4】：

第一个：使用type="number" 输入

第二个：用于实时使用on('input',) 而不是.change 事件.change 的作用类似于.on('blur' ,)

第三：使用.val()而不是.value

4th：当数字改变时，你需要重置#boxquantity div .. 对我来说，最好将输入 html 保存到变量然后使用 .html() 而不是 .append() .. 或者你可以使用$('#boxquantity').html(''); for 循环前

$(document).ready(function() 
  $('#howmany').on('input',function() 
    var Inputs = '';
    for (var i = 0; i < $("#howmany").val(); i++) 
      Inputs += '<input name="boxid[]" type="file" size="50"/>';
    
    $('#boxquantity').html(Inputs);
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="howmany" />
<div id="boxquantity"></div>