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

【问题标题】：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

标签： javascript jquery html dynamic forms

【解决方案1】：

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

替换了 $("#howmany").value
我还添加了一个删除功能来清除显示的输入数量。

运行 sn-p，谢谢

$(document).ready(function() { $('#howmany').change(function() { $("#boxquantity input").remove(); for (i = 0; i < $("#howmany").val(); i++) { $('#boxquantity').append('<input name="boxid['+i+']" 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>

【讨论】：

【解决方案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>

【讨论】：