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

give dynamically generated textboxes unique names

本文关键字：一个 唯一 动态 文本      更新时间：2023-09-26

我创建了一个脚本，根据用户输入动态生成X个文本框。我如何给每个文本框自己的名称，以便我可以使用每个单独后，他们生成?

演示:小提琴

<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();
        }
    });
});

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

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

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