Demo

Question

我搜索了很多，但我只能找到+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吗？

Answer 1

是的，要么使用javascript，要么将表单发送到服务器，在那里生成一个包含所有输入的新html页面（例如使用PHP）。

Answer 2

是的你必须使用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的值附加新输入

Answer 3

这是一个不使用任何框架的简单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）。但是，当不止一次调用此函数时，它将无法正常工作（例如，它只能增加输入数量但不会减少）

Answer 4

这是 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);
    }
});

Answer 5

这对我有用

       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>

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

5 个答案:

Demo