我为此搜索了很多，但我只能找到+1 -1解决方案。但我想用这样的其他输入设置的输入数量：用其他输入动态添加和删除输入

//Enter the number of inputs (1 is the start-value) 
<input type="text" size="3" maxlength="3" id="count" name="count" value="1"> 

//Display that number of inputs (1 at start) 
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">

当用户现在在第一个字段写入5，形式应该是这样的：

//Enter the number of inputs (1 is the start-value) 
<input type="text" size="3" maxlength="3" id="count" name="count" value="1"> 

//Display that number of inputs (1 at start) 
<input type="text" size="30" maxlength="30" id="input_1" name="input_1"> 
<input type="text" size="30" maxlength="30" id="input_2" name="input_2"> 
<input type="text" size="30" maxlength="30" id="input_3" name="input_3"> 
<input type="text" size="30" maxlength="30" id="input_4" name="input_4"> 
<input type="text" size="30" maxlength="30" id="input_5" name="input_5">

如何我可以做这个吗？我必须使用js吗？

来源

2013-07-18 Fox

是必须，除非你想重新加载页面 – Soundz

这里有一个简单的JavaScript代码，不使用任何框架：

function addInputs() { 
    var count = parseInt(document.getElementById("count").value); 
    for (var i = 2; i <= count; i++) { 
     document.getElementById('moreinputs').innerHTML += '<input type="text" name="input_' + i + '" id="input_' + i + '" />'; 
    } 
}

在这个例子中，你必须添加一个ID为'moreinputs'的容器（div）。然而，在调用这个函数一次以上时，将无法正常工作（例如，它只能增加投入的数量，但不会减少）

来源

2013-07-18 10:34:43

如果不使用任何框架，这样做会很棒！但是如果需要的话，我需要减少它，难道不能做到吗？ – Fox

当然它可以：实际上你只需在for循环之前设置document.getElementById（'moreinputs'）。innerHTML =''。 –

我试过了，它不起作用..我吸吮javascript ^^'[jsfiddle]（http://jsfiddle.net/equeL/） – Fox

是的，无论是使用javascript，还是将表单发送到服务器，其中包含所有输入的新html页面都会生成（例如使用PHP）。

来源

2013-07-18 10:14:59

我想过，但我不想为此生成一个新的页面。 – Fox

是的，你必须用js动态做现场你有一个jQuery的标签，所以我会在jQuery的

显示一个例子

这是不是最好的例子，但它的工作原理，这是一个起点

JS：

$(function(){ 
    $('#master').on('change', function() { 
     var count = $(this).val(); 
     $('#otherInputs').html('') 
     for(var i = 0; i < count; i++) { 
      $('#otherInputs').append(
       $('<input>', {type: 'text'}) 
      ); 
     } 
    }); 

});

HTML：

<input type="number" id="master" value="1"> 
<div id="otherInputs"></div>

Demo

在英语中，这是说...

当你change#master我会空#master（html('')）循环并追加取决于#master的价值

来源

2013-07-18 10:22:43 iConnor

jQuery标签被删除（我不知道为什么xD），但它没问题。看起来很好，thx，会尝试！ – Fox

那是因为你没有问过关于jQuery的问题 – iConnor

但是我问了一个可以用jQuery回答的问题 – Fox

这里有一个新的输入FIDDLE。希望能帮助到你。 :)

HTML

<input type="text" size="3" maxlength="3" id="count" name="count" value="1"> 
<div id="container"></div>

脚本

$('#count').on('keyup', function() { 
    var $this = $(this); 
    var count = $this.val(); 
    $('#container').empty(); 
    for (var x = 1; x <= count; x++) { 
     var newInput = '<input type="text" size="30" maxlength="30" id="input_' + x + '" name="input_' + x + '">'; 
     $('#container').append(newInput); 
    } 
});

来源

2013-07-18 10:25:11

这为我工作

 function AddField() { 
     var count = $("#countetfield").val(); 
     var i = 1; 
     var id = $("#container .testClass:last").attr('name'); 
     var test = id.split("_"); 
     id_name = test[1]; 

     while (i <= count) { 

      id_name++; 
      var a = '<input type="text" class="testClass" size="30" maxlength="30" id="input_' + id_name + '" name="input_' + id_name + '"/>'; 
      $("#container").append(a); 
      i++; 
     } 
    } 

<input type="text" id="countetfield" value="1" /> 
     <input type="button" value="Go" onclick="AddField();" /> 
     <div id="container"> 
      <input type="text" class="testClass" size="30" maxlength="30" id="input_1" name="input_1" /> 
     </div>

来源

2013-07-18 10:36:09 Gerry

用其他输入动态添加和删除输入

回答

Demo

相关问题