Я пытаюсь клонировать поле для детей, основанное на значении, выбранном для числа детей, чтобы выбрать возраст для каждого ребенка /. HTML является:Клон HTML DIV с jQuery по выбору
НОМЕР 1
<div class="col-xs-4">
<label>Copii</label>
<div class="selector">
<select id='kids-1' name="rooms[0][child]" class="full-width">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
>
</select>
</div>
</div>
<div class="age-of-children no-display">
<div class="row">
<div class="col-xs-4 child-age-field">
<label>Copil 1</label>
<div class="selector validation-field">
<select id='age-1' class="full-width" name="rooms[0][age][]">
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
</div>
</div>
</div>
</div>
ROOM 2
<div class="col-xs-4">
<label>Copii</label>
<div class="selector">
<select id='kids-2' name="rooms[1][child]" class="full-width">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
>
</select>
</div>
</div>
<div class="age-of-children no-display">
<div class="row">
<div class="col-xs-4 child-age-field">
<label>Copil 1</label>
<div class="selector validation-field">
<select id='age-2' class="full-width" name="rooms[1][age][]">
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
</div>
</div>
</div>
</div>
И код JQuery что использование
// handle kid age from room 1
tjq('select[id=kids-1]').change(function(){
var prev_kids = tjq('.age-of-children .child-age-field').length;
tjq('.age-of-children').removeClass('no-display');
var i;
if (prev_kids > tjq(this).val()) {
var current_kids = tjq(this).val();
if (current_kids == 0) {
current_kids = 1;
tjq('.age-of-children').addClass('no-display');
}
for (i = prev_kids; i > current_kids; --i) {
tjq('.age-of-children .child-age-field').eq(i-1).remove();
}
} else {
for (i = prev_kids + 1; i <= tjq(this).val(); i++) {
var clone_age_last = tjq('.age-of-children .child-age-field:last').clone();
var clone_age = clone_age_last.clone();
tjq('.age-of-children .row').append(clone_age);
var name = clone_age.find('label').text().replace(/(\d+)/, function(match, p1)
{
return (parseInt(p1) + 1);
});
clone_age.find('label').text(name);
clone_age.find('select').val(0);
clone_age.find('.custom-select').text(0);
}
}
});
// handle kid age from room 2
tjq('select[id=kids-2]').change(function(){
var prev_kids = tjq('.age-of-children .child-age-field').length;
tjq('.age-of-children').removeClass('no-display');
var i;
if (prev_kids > tjq(this).val()) {
var current_kids = tjq(this).val();
if (current_kids == 0) {
current_kids = 1;
tjq('.age-of-children').addClass('no-display');
}
for (i = prev_kids; i > current_kids; --i) {
tjq('.age-of-children .child-age-field').eq(i-1).remove();
}
} else {
for (i = prev_kids + 1; i <= tjq(this).val(); i++) {
var clone_age_last = tjq('.age-of-children .child-age-field:last').clone();
var clone_age = clone_age_last.clone();
tjq('.age-of-children .row').append(clone_age);
var name = clone_age.find('label').text().replace(/(\d+)/, function(match, p1)
{
return (parseInt(p1) + 1);
});
clone_age.find('label').text(name);
clone_age.find('select').val(0);
clone_age.find('.custom-select').text(0);
}
}
});
Код должен клонировать возраст 1, основанное на выбранном значении селектора числа малышей, поэтому я могу выбрать возраст для каждого ребенка.
Я создал JSFiddle
Я бы рекомендовал использовать angular.js для этого, поскольку это экономит вам кучу линий. просто взгляните на это: http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro – Manticore
@Manticore Спасибо, я начну учиться, но это займет некоторое время, и мой проект должен быть завершено :) – GeorgeB
Скрипт показывает ошибку на консоли: ReferenceError: tjq не определен –