У меня есть код в следующем примере:

<form>
  <label>name</label><input type="text" />
  <label>phone</label><input type="text" />

  <label>color</label><select>
    <option>red</option>
    <option>blue</option>
    <option>green</option>
  </select>

  <label>e-mail</label><input type="text" />
</form>

И я хочу продублировать только раздел select, если он нужен пользователю, с помощью кнопки между разделом select и полем ввода электронной почты.

Я не очень люблю JavaScript или jQuery, поэтому был бы очень признателен, если бы вы также могли добавить четкое объяснение к своему ответу.

4
Viacheslav Nmk 15 Окт 2018 в 08:00

2 ответа

Лучший ответ

Вы можете использовать функцию JQuery clone, чтобы клонировать свой элемент, а затем добавить его там, где он вам нужен, или, если вам нужно иметь другой идентификатор для каждого нужного раздела, вы можете сохранить индекс и установить его как идентификатор каждый раз, когда вы добавляете раздел

var index = 1;
function addColor() {
  var nextSection = '<div id="color-section-' + index++ + '">' +
    '<label>color</label>' +
    '<select>' +
      '<option>red</option>' +
      '<option>blue</option>' +
      '<option>green</option>' +
    '</select><br />' +
  '</div>';
  $(nextSection).appendTo($("#color-section"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
  <label>name</label><input type="text" /><br />
  <label>phone</label><input type="text" /><br />

  <div id="color-section">
    <label>color</label>
    <select>
      <option>red</option>
      <option>blue</option>
      <option>green</option>
    </select><br />
  </div>

  <label>e-mail</label><input type="text" /><br />
</form>

  <button onClick="addColor()">Add Color</button><br />
2
Itay Gal 15 Окт 2018 в 05:58

Вы можете использовать clone () для копирования элемента. См. Ниже пример с объяснением.

  1. Элемент div с именем «color-selections» содержит начальный тег выбора.

    <div class="color-selections"> <select> <option>red</option> <option>blue</option> <option>green</option> </select> </div>

  2. Внутри класса «выбор цвета» будет неизвестное количество тегов выбора. Поэтому я использую метод first () для получения первого элемента (исходный тег выбора).

    $(".color-selections select:first")

  3. Скопируйте первый элемент с помощью clone ().

    $(".color-selections select:first").clone()

  4. Наконец, добавьте этот клонированный элемент в класс «выбор цвета» с помощью метода appendTo ().

    $(".color-selections select").first().clone().appendTo(".color-selections");

function addColor() {
  $(".color-selections select:first").clone().appendTo(".color-selections")
  //OR $(".color-selections select").first().clone().appendTo(".color-selections");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>name</label><input type="text" />
  <label>phone</label><input type="text" />

  <label>color</label>
  <div class="color-selections">
    <select> //$(".color-selections select:first")
      <option>red</option>
      <option>blue</option>
      <option>green</option>
    </select>
  </div>
  <input type="button" value="+" onclick="addColor();">

  <label>e-mail</label><input type="text" />
</form>

Я надеюсь, что дизайн не является важной частью образца кода.

1
Jitendra G2 15 Окт 2018 в 06:35