Jquery loop для создания элементов

Мне не повезло с этой задачей, так благодарной за любую помощь.

У меня есть html-форма, в которой есть небольшое меню выбора (1-10) то есть

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

в зависимости от того, какое значение выбрано, я хотел бы, чтобы jquery создавал (или удалял) это количество входных текстовых полей (с разными именами и идентификаторами). например, если выбрано 2, эти входы будут созданы:

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

Я с нетерпением жду ваших простых и элегантных решений! Энди

Ответ 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);
});

Ответ 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 (или html, не созданного вызовом главной функции jquery $AFAIK), поскольку из-за идентификаторов они уникальны для каждого цикла. См. Статью Джона Ресига "Вещи, которые вы, возможно, не знаете о речи jQuery", для информации об этом.

Ответ 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);
});

Ответ 4

Это использует $.map() для итерации по массиву с использованием индекса для эмуляции оператора диапазона "0..N" таких языков, как Perl и PHP. Поскольку $.map() возвращает массив возвращаемых значений каждого вызова функции обратного вызова, мы можем передать это прямо на $().html(), чтобы установить содержимое родительского элемента. Ухоженная?

Просто убедитесь, что вы указали параметры обратного вызова "объект" и "индекс" в правильном порядке - они противоположны друг другу до $.each()!

HTML

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

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/