Question

我已经创建了一个脚本，可以根据用户输入动态生成X文本框。如何为每个文本框指定自己的名称，以便在生成每个文本框后单独使用它们？

演示：Fiddle

<html>

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>

$(document).ready(function(){
$("#ppl").change(function(){

    // The easiest way is of course to delete all textboxes before adding new ones
    //$("#holder").html("");

    var count = $("#holder input").size();
    var requested = parseInt($("#ppl").val(),10);

    if (requested > count) {
        for(i=count; i<requested; i++) {
        var $ctrl = $('<input/>').attr({ type: 'text', name:'text', value:'text'});        
            $("#holder").append($ctrl);
        }
}
    else if (requested < count) {
        var x = requested - 1;
        $("#holder input:gt(" + x + ")").remove();
    }
});
});
</script>

</head>
<body>
    <Input type="text" id="ppl">
     <button onclick="function()">Try it</button>       
<div id="holder"></div>
</body>
</html>

$(document).ready(function(){
    $("#ppl").change(function(){

        var count = $("#holder input").size();
        var requested = parseInt($("#ppl").val(),10);

        if (requested > count) {
            for(i=count; i<requested; i++) {
                var $ctrl = $('<input/>').attr({ type: 'text', name:'text', value:'text'});        
                $("#holder").append($ctrl);
            }
        } else if (requested < count) {
            var x = requested - 1;
            $("#holder input:gt(" + x + ")").remove();
        }
    });
});

我计划使用生成的文本框向用户请求更多信息，然后使用该新信息处理另一个脚本。

Answer 1

只需将当前计数附加到字段名称：

var $ctrl = $('<input/>').attr({ type: 'text', name:'text'+i, value:'text'});

给动态生成的文本框唯一的名称

1 个答案: