Показать сообщение отдельно
  #2 (permalink)  
Старый 16.05.2017, 01:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

клонирование: ко-во согласно значению в селекте
exosteal, сss только для лучшего просмотра примера.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .divorced_main>.divorced_info:nth-child(n +2){
    display:none;
  }
  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var parent = document.querySelector(".divorced"),
        select = document.querySelector("#marry_amount"),
        clone = document.querySelector(".divorced_main").cloneNode(true);
    select.addEventListener("change", function() {
        var divs = document.querySelectorAll(".divorced_main"),
            v = +this.value + 1,
            len = Math.max(v, divs.length);
        for (var i = 1; i < len; i++)
            i >= v ?  parent.removeChild(divs[i]):
            divs[i] || parent.appendChild(clone.cloneNode(true))
    })
});
  </script>
</head>

<body>
<div class="divorced">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          Сколько было супругов
        </div>
        <div class="col-md-6">
          <select name="marry_amount" id="marry_amount">
            <option value="0">1</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
          </select>
        </div>
      </div>
    </div>
<div class="divorced_main">
  <div class="divorced_info">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          Дата развода
        </div>
        <div class="col-md-6">
        <label for="divorce_date">
          <input name="divorce_date" id="datepicker"  placeholder="01.01.1970">
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="divorced_info">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          Дата заключения брака
        </div>
        <div class="col-md-6">
        <label for="marry_date">
          <input name="marry_date" placeholder="01.01.1970" id="datepicker">
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="divorced_info">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          Город расторжения брака
        </div>
        <div class="col-md-6">
        <label for="divorce_date">
          <input type="text" name="divorce_town"  placeholder="Город">
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="divorced_info">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          Фамилия супруга(и)(включая девичью)
        </div>
        <div class="col-md-6">
        <label for="husband_surname">
          <input type="text" name="husband_surname"  placeholder="Фамилия">
        </label>
        </div>
      </div>
    </div>
    <div class="divorced_info">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            Имя супруга(и)
          </div>
          <div class="col-md-6">
          <label for="husband_name">
            <input type="text" name="husband_name"  placeholder="Имя">
          </label>
          </div>
        </div>
      </div>
    </div>
    <div class="divorced_info">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            Отчество супруга(и)
          </div>
          <div class="col-md-6">
          <label for="husband_patronyn">
            <input type="text" name="husband_patronym"  placeholder="Отчество супруга">
          </label>
          </div>
        </div>
      </div>
    </div>
    <div class="divorced_info">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            Дата рождения
          </div>
          <div class="col-md-6">
          <label for="husband_birth">
            <input name="husband_birth" id="datepicker" placeholder="01.01.1970">
          </label>
          </div>
        </div>
      </div>
    </div>
    <div class="divorced_info">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            Гражданство
          </div>
          <div class="col-md-6">
          <label for="nationality">
            <input type="text" name="nationality"  placeholder="Страна">
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="divorced_info">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            Страна
          </div>
          <div class="col-md-6">
          <label for="country">
            <input type="text" name="country"  placeholder="Страна">
          </label>
          </div>
        </div>
      </div>
    </div>
    <div class="divorced_info">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            Город
          </div>
          <div class="col-md-6">
          <label for="town">
            <input type="text" name="town"  placeholder="Город">
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

</body>
</html>
Ответить с цитированием