javascript - 根据文本框的值创建文本框

标签 javascript jquery html ajax

基本上我想做的是在页面上有一个文本框。当用户输入一个数字时,它应该在其下方自动生成 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>
<SELECT id="ppl">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
</SELECT>
<div id="holder"></div>
</body>
</html>

还有另一种方法可以使用 ajax 而不是 jquery 来做这样的事情吗?

演示:Fiddle

最佳答案

我再次更新了您的 fiddle ,因为您的 fiddle 的所有内容都位于 HTML 部分。 jsFiddle .

要给它们所有唯一的名称,您需要做的就是将索引 (i) 连接到名称字段的末尾,如下所示:

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

这将为您提供唯一的名称:(“text1”、“text2”、.. 等等)。我已经在更新的 fiddle 中为您更改了它。

当涉及到您的 AJAX 问题时,我同意@Barmar 的观点,除非您需要获取只有服务器才能提供的数据,否则没有必要进行额外的服务器请求。它只是在等式中增加了另一个因素,可能会减慢速度。如果 JavaScript 可以为您做完全相同的事情,但在客户端而不是在服务器端,那绝对是一个更快的选择。

关于javascript - 根据文本框的值创建文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16328719/

相关文章:

Jquery Id 选择器不适用于 Js Id 选择器

javascript - 如何用类关闭 jquery 对话框?

javascript - 如何在点击功能之外获取值(value)

javascript - 如何使用 nodeJs 将 jsreport 渲染保存到文件?

javascript - 如何正确比较来自 ajax post call "data"的响应

jquery - 语义 UI 不呈现文本

javascript - Javascript更改音频src

javascript - jQuery 检查值是否在对象中

javascript - 使用 mongoose 保存新数据时避免重复

html - Chrome 和 Firefox 处理缩放的方式不同。如何在我的 CSS 中处理这个问题