JavaScript DOM динамическая форма из PHP

Question

Моя база данных MySQL предоставляет список элементов (и целочисленные идентификаторы с ними) в поле <select> и кол-во для использования в моей веб-форме (со стилем display: none, поэтому он скрыт). Но: я хочу, чтобы пользователь мог выбирать, сколько вариантов этого типа он хочет ввести в форму - как я могу динамически делать множественные выборы?

Пример: продукты в инвентаре - апельсины, бананы и персики. Существует один тег выбора:

<select name="p[0]">
    <option value="2">Orange</option>
    <option value="23">Banana</option>
    <option value="31">Peach</option>
</select>
QTY <input type="text" name="qty[0]" />

Теперь я хочу добавить еще один выпадающий список, позволяющий пользователю выбирать между заказом одного, двух или трех классов продуктов. он может выбрать 2, а затем две копии вышеуказанного кода будут вставлены в DOM, чтобы он мог ввести два варианта продукта и количество. (Сценарий даст им имена p[0] и p[1] и т. д.)

Может ли кто-нибудь помочь мне здесь?

Answer 1

Самое простое - клонировать уже имеющиеся у вас узлы столько раз, сколько необходимо (в отличие от создания нового DOM с помощью document.createElement() или innerHTML.

.

Для начала окружите ваши существующие <select> и <input> элементом div с хорошо известным идентификатором. Кроме того, вы хотите добавить еще один DIV, чтобы поместить повторяющиеся входные данные в:

<div id="template">
  <select name="p[0]"> ... </select>
  QTY: <input name="qty[0]"/>
</div>
<div id="copies">
</div>

Теперь создайте функцию, которая будет повторять шаблон N раз:

function makeCopies(num) {
  var template = document.getElementById('template');
  var output = document.getElementById('copies');

  // Delete existing nodes.
  output.innerHTML = '';

  // We start with 1, not 0, because we already have the template.
  for (var i = 1; i < num; i++) {
    var copy = template.cloneNode(true);
    // Change the input names according to index.
    copy.getElementsByTagName('select')[0].name = 'p[' + i + ']';
    copy.getElementsByTagName('input')[0].name = 'qty[' + i + ']';
    output.appendChild(copy);
  }   
}