JQUERY：根据选择框的值

Question

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/

Answer 1

试试这个

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

Check Fiddle

Without clone

Answer 2

尝试此

$("select").change(function() { 

var fieldParent=$('#fields_parent'); 

$(fieldParent).children().remove(); 

for(var i=0;i<parseInt($(this).val());i++) 
{ 
     $('<input type="text" id="txtInput_' + i + '"></input>').appendTo(fieldParent); 
} 

}）;

在jsfiddle上更新了相同的内容。

Answer 3

小提琴：http://jsfiddle.net/b5Gqg/6/

var bla = $('#bla'); 
$("select").change(function(){ 
    var len = parseInt($(this).val()); 
    $('input').remove(); 
    while(len--) bla.clone().insertAfter('select'); 
});​