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

检查小提琴

无克隆

Answer 2

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

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

Answer 3

试试这个

$("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 上更新相同。