jquery循环来创建元素

Question

到目前为止,我没有幸运完成这项任务,非常感谢任何帮助.

我有一个html表单,其中有一个小选择菜单(1-10)即

<select>
    <option value = '1'>1</option>
    <option value = '2'>2</option>
    ...
    <option value = '10'>10</option>
</select>

根据选择的值,我希望jquery创建(或删除)该数量的输入文本框(具有不同的名称和ID).例如,如果选择2,则会创建这些输入:

<input type = 'text' name = 'name1' id = 'id1' />
<input type = 'text' name = 'name2' id = 'id2' />

我期待您的简单而优雅的解决方案!安迪

Answer 1

像这样的东西:

$('select').change(function() {
     var num = parseInt($(this).val(), 10);
     var container = $('<div />');
     for(var i = 1; i <= num; i++) {
         container.append('<input id="id'+i+'" name="name'+i+'" />');
     }
     $('somewhere').html(container);
});

Answer 2

略微修改Tatu的答案,

$('select').change(function() {
 var num = parseInt($(this).val(), 10);
 var container = $('<div />');

 for(var i = 1; i <= num; i++) {
     $('<input />', {
         id: "id" + 1,
         name: "name" + 1
     }).appendTo(container);
 }

 $('somewhere').html(container);
 });

这种方式更快,更容易阅读.它更快的原因是因为jQuery大量缓存创建元素.它第一次缓存"<input />",然后只使用缓存的对象来创建更多它们.它可以这样做,因为文本不会改变.但是,它不能通过append(或者不是通过调用主jquery函数$ AFAIK创建的html)来执行此缓存,因为由于它们每个循环都是唯一的.有关此信息,请参阅John Resig的"您可能不了解的关于jQuery的事情"演讲.