我如何动态创建输入框? [英] How would I dynamically create input boxes on the fly?
问题描述
我想使用HTML下拉框的值,并创建下面的输入框。我希望我可以在飞行中实现这一点。此外,如果值更改,它应该适当地添加或删除。
我需要什么编程语言?我正在整个网站使用PHP。
下面是一个使用jQuery实现目标的例子:
假设你有以下html:
< div>
< select id =input_count>
< option value =1> 1输入< / option>
< option value =2> 2个输入< / option>
< option value =3> 3个输入< / option>
< / select>
< div>
< div id =inputs> < / DIV>
这是您的任务的js代码:
($)$($)$($($)$($)$($) :selected);
var selectedValue = selectedOption.val();
var targetDiv = $(#inputs);
targetDiv.html();
for(var i = 0; i< selectedValue; i ++){
targetDiv.append($(< input />));
}
} );
您可以简化此代码,如下所示:
< pre $
$('#input_count')。change(function(){
var selectedValue = $(this).val();
var对于(var i = 0; i< selectedValue; i ++){
targetDiv.append($(< input / >));
}
});
这是一个工作的小提琴示例: http://jsfiddle.net/melih/VnRBm/
您可以阅读更多关于jQuery的信息: http://jquery.com/
I want to use the value of a HTML dropdown box and create that number of input boxes underneath. I'm hoping I can achieve this on the fly. Also if the value changes it should add or remove appropriately.
What programming language would I need to do this in? I'm using PHP for the overall website.
Here is an example that uses jQuery to achieve your goals:
Assume you have following html:
<div>
<select id="input_count">
<option value="1">1 input</option>
<option value="2">2 inputs</option>
<option value="3">3 inputs</option>
</select>
<div>
<div id="inputs"> </div>
And this is the js code for your task:
$('#input_count').change(function() {
var selectObj = $(this);
var selectedOption = selectObj.find(":selected");
var selectedValue = selectedOption.val();
var targetDiv = $("#inputs");
targetDiv.html("");
for(var i = 0; i < selectedValue; i++) {
targetDiv.append($("<input />"));
}
});
You can simplify this code as follows:
$('#input_count').change(function() {
var selectedValue = $(this).val();
var targetDiv = $("#inputs").html("");
for(var i = 0; i < selectedValue; i++) {
targetDiv.append($("<input />"));
}
});
Here is a working fiddle example: http://jsfiddle.net/melih/VnRBm/
You can read more about jQuery: http://jquery.com/
这篇关于我如何动态创建输入框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!