[英]Clone HTML field on field select
當我選擇另一個字段時,我正在嘗試克隆我的HTML搜索的一部分。
完整的Html表單是:
<div class="form-group col-sm-6 col-md-3">
<h4 class="title">Who</h4>
<div class="row">
<div class="col-xs-4">
<label>Rooms</label>
<div class="selector">
<select name="roomsno" class="full-width">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<!-- FROM HERE -->
<div class="col-xs-4">
<label>Adults</label>
<div class="selector">
<select name="adults" class="full-width">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div class="col-xs-4">
<label>Kids</label>
<div class="selector">
<select name="kids" 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>
<div class="age-of-children no-display">
<h5>Kids Age</h5>
<div class="row">
<div class="col-xs-4 child-age-field">
<label>Kid 1</label>
<div class="selector validation-field">
<select name="child_ages[]" class="full-width">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<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>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
</div>
</div>
</div>
<!-- To here-->
</div>
我需要的是當我選擇兩個或更多房間克隆評論的區域從這里 - 到這里
我有一個類似的代碼,但適合孩子年齡的孩子年齡的cpde是:
// handle kid age filter
tjq('select[name=kids]').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)在“from here / to here”中包含一個額外的div,例如“additionalRoom”類
2)更改您房間號碼的事件選擇,並使用$(this).val()獲取號碼; ( http://api.jquery.com/change/ )
3)使用clone()復制您的additionalRoom div,並根據所需位置的所選房間號碼插入x次( http://api.jquery.com/clone/ )
4)我將更改房間表單部分,以便可以簡單地克隆相同的HTML並以良好的方式生成表單數據。 例如name =“roomAdults []”,name =“roomKids []”或者您將房間數據作為編號數組(房間[1] [成人],房間[2] [兒童])。 在最后一種情況下,您必須在克隆之后和插入之前增加此數字
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.