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); }; как мне реализовать это с помощью нижеприведенных условий |
клонирование: ко-во согласно значению в селекте
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>
|
| Часовой пояс GMT +3, время: 20:55. |