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

Check Fiddle

Without clone