创建基于文本框的值文本框 [英] Creating Text Boxes based on the value of a text box
问题描述
基本上西隧我想要做的是有一个网页在一个文本框。当用户输入一个数目，它应该自动生成它下面的额外的文本框x量
Basically wht I'm trying to do is have a single textbox on a page. When the user enters a number, it should auto generate X amount of additional text boxes below it.
我已经能够得到它基于过一个下拉框，而是一个下拉框不会为这个应用工作的工作。
I've been able to get it to work based off of a dropdown box but a dropdown box will not work for this application.
<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的？
Also is there an alternative way to do something like this using ajax rather then jquery?
演示：小提琴
推荐答案
我又更新了小提琴，因为你的提琴拥有了一切坐在HTML的一部分。 的jsfiddle 。
I have updated your fiddle again, as your fiddle had everything sitting in the HTML part. jsFiddle.
要给予他们唯一的名称，所有你需要做的是串联指数（我）的名称字段的结尾是这样的：
To give them all unique names, all you need to do is concatenate the index (i) to the end of the name field like this:
for (i = count; i < requested; i++) {
var $ctrl = $('<input/>').attr({
type: 'text',
name: 'text' + i,
value: 'text'
});
$("#holder").append($ctrl);
}
这会给你唯一的名称：（text1中，文本2，..等）。我已经在更新的提琴改变它。
This will give you unique names: ("text1", "text2", .. and so on). I have already changed it for you in the updated fiddle.
我同意用@Barmar，当涉及到你的AJAX的问题，有没有点，除非你需要获取数据，只有服务器可以提供做一个额外的服务器请求。它只是增加了一个因素考虑这可能会慢下来的方程。如果JavaScript可以做同样的给你，但随后在客户端，而不是在服务器端，这绝对是一个更快的选择。
I'm agreeing with @Barmar when it comes to your AJAX question, there's no point to do an additional server request unless you need to get data which only the server can provide. It just adds another factor into the equation which might slow things down. If JavaScript can do exactly the same for you but then on the client side instead of on the server side, it is definitely a much faster option.
这篇关于创建基于文本框的值文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
