Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.05.2017, 23:41
Интересующийся
Отправить личное сообщение для exosteal Посмотреть профиль Найти все сообщения от exosteal
 
Регистрация: 06.05.2017
Сообщений: 16

clonenode при выборе value
Ребят, помогите пожалуйста,https://jsfiddle.net/bxsfuuto/1/ нужно при выборе числа в селекте клонировалось количество divorced_main (выбрал число 3 - добавилось два divorced_main, выбрал 4 - клонировалось 3 divorced_main ). но только один раз.


function cloneNode(nodeSelector,toAppend){
var node=document.querySelector(nodeSelector);
var append=document.querySelector(toAppend);
var clone=node.cloneNode(true);
var parentDiv = append.parentNode;
parentDiv.insertBefore(clone, append);
};

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

клонирование: ко-во согласно значению в селекте
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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение selecta при выборе option ainur777 Общие вопросы Javascript 1 10.01.2015 16:23
jquery действие при выборе или вводе mali Общие вопросы Javascript 7 03.11.2014 16:18
Меняющейся текст при выборе select ainur777 Общие вопросы Javascript 0 24.10.2014 22:01
Выделение строки <select> при выборе checkbox DarkMaster13 Общие вопросы Javascript 4 14.04.2014 03:30
при выборе radio появляется форма chesters jQuery 1 30.11.2009 11:20