HTML
<select name="select" id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<input id="bla" type="text" name="attendant[]">
JQuery
$("select").change(function() {
var select = parseFloat($('#select').val());
$('#bla').after('<br><input id="bla" type="text" name="attendant[]">');
});
大家好,上面是我创建的代码。 我需要更改选择框以根据选择框的值更新表单字段的数量。如果用户更改为 4,屏幕上应该显示 4 个表单字段。如果值更改为 1,则屏幕上应该只有一个。
几天前刚开始使用 JQuery 不太好,因此不胜感激。
谢谢
这是我正在处理的 JSFiddle。 http://jsfiddle.net/andrewvmail/b5Gqg/3/
最佳答案
试试这个
HTML
<select name="select" id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<div class="template" style="display:none">
<input type="text" name="attendant[]" />
</div>
<div id="container" >
</div>
Javascript
$("select").change(function() {
var select = parseInt($('#select').val() , 10);
var $clone = $('.template').clone().html();
console.log($clone);
var html = '';
for(var i = 0;i< select ; i++){
html += $clone;
}
$('#container').empty().html(html);
}).change();
你可以在不使用 .clone()
的情况下实现同样的效果..那是不必要的..
$("select").change(function() {
var select = parseInt($('#select').val() , 10);
var $clone = $('.template').html();
var html = '';
while(select > 0){
html += $clone;
select--;
}
$('#container').empty().html(html);
}).change();
关于javascript - JQUERY:更改选择框时,根据选择框值更新表单上的文本输入数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13392288/