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大量缓存创建元素。它缓存“＆lt; input /＆gt;”第一次，然后只使用缓存的对象来创建更多。它可以这样做，因为文本不会改变。但是，它不能通过append（或者不是通过调用主jquery函数$ AFAIK创建的html）来执行此缓存，因为由于它们每个循环都是唯一的。有关此信息，请参阅John Resig的“您可能不了解的关于jQuery的事情”演讲。

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

Answer 4

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

确保以正确的顺序声明回调函数的'object'和'index'参数 - 它们与$.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/

jquery循环来创建元素

4 个答案: