繁体   English   中英

在字段选择上克隆HTML字段

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM