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' />

我期待着您毫无疑问的简单而优雅的解决方案！andy

- Andy

---

请提供您的一些标记和更多关于您尝试做什么的细节。 - harpo

请直接在答案上进行评论，不要添加新的答案。 - Lance Roberts

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);
});

- Tatu Ulmanen

---

jQuery 是否真的知道，当您将 HTML 添加到已关闭的 DIV（'<div />'）时，它应该创建 <div>添加的 HTML</div>？ - Michel

@Michel，是的。$('<div />')只是创建一个空的div元素，等同于$('<div></div>')或者$(document.createElement('div'))。 - Tatu Ulmanen

很好，Jquery一直以积极的方式让我感到惊喜。 - Michel

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 />"，然后只使用缓存对象来创建更多的元素。它可以这样做，因为文本内容不会改变。但是，由于每个循环中的id都是唯一的，所以它无法对append（或者没有通过调用主要的jQuery函数$创建的html）进行缓存。请参见John Resig关于jQuery的“你可能不知道的事情”演讲以获得更多信息。

- Alistair

Answer 3

<select>
    <option value = '1'>1</option>
    <option value = '2'>2</option>
    ...
    <option value = '10'>10</option>
</select>
<div id="container">
</div>

针对您的标记。

然后

$('select').bind('change', function () {
    var val = parseInt($(this).val(), 10) + 1,
        str = '';

    for (var i=1; i<val;i++) {
        str += '<input type="text" name="name' + i + '" id="id' + i + '"/>';
    }

    $('#container').html(str);
});

- Matt

Answer 4

这里使用 $.map() 来迭代数组，使用索引来模拟像 Perl 和 PHP 这样的“0..N”范围运算符。由于 $.map() 返回每次调用回调函数的返回值数组，因此我们可以将其直接传递给 $().html() 来设置父元素的内容。很棒吧？

只需确保正确声明回调函数的“对象”和“索引”参数的顺序 - 它们与 $.each() 相反！

HTML

<div id='container'></div>

JS

const HOW_MANY = 10;

$('#container').html(
  $('<select/>', { id: 'selection' }).html(
    $.map(Array(HOW_MANY), function(o,i) {
      i++;  // because array indices run from 0
      return $('<option/>', { value: i }).text(i);
    }) // map
  ) // <select/>
);

FIDDLE

https://jsfiddle.net/kmbro/xxtbjgzo/

- kbro