цикл jquery для создания элементов

Question

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

У меня есть 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' />

Жду ваших, без сомнения, простых и элегантных решений! * 1009 Энди *

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

Чтобы немного изменить ответ Тату,

$('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 сильно кэширует создание элементов. Он кэширует «» в первый раз, а затем просто использует кэшированный объект для создания большего количества из них. Это может быть сделано, потому что текст не меняется. Тем не менее, он не может выполнить это кэширование с помощью добавления (или HTML, не созданный путем вызова основной функции jquery $ AFAIK), поскольку из-за идентификаторов они уникальны для каждого цикла. Информацию об этом смотрите в речи Джона Ресига «То, что вы, возможно, не знаете о jQuery».

Answer 3

Используется $.map() для перебора массива с использованием индекса для эмуляции оператора диапазона "0..N" в таких языках, как Perl и PHP. Поскольку $.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/

Answer 4

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