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

小提琴： 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上更新了相同内容。

JQUERY：在更改时选择框根据选择框值更新表单上的文本输入数

3 个答案: