Question

我有1个选择框，其中有数字作为选项。我在div中有3个输入文本框。

当用户在选择框中选择一个数字时，我想根据选择框的数量复制该div ...

重要的是，每个文本框的ID和名称必须递增，如下所示：

text_box_first_1, text_box_second_2, text_box_thrid_3
text_box_first_2, text_box_second_2, text_box_thrid_2

编辑：对不起，忘了发布我的内容：

      <script>
    function clone(){
        var $newdiv = $('.initial_clone_div:first').clone();
        $('#add_clones_here').append($newdiv);
    }

    $('#num_periods').change(function () {
        for(var counter = 0; counter < $(this).val()-1; counter++) {
            $('.period_title').html('Period ' +(counter+1));
            clone();
        }
    });


</script>

 <!-- Period scores -->
    <div class="form-group initial_clone_div">
        <h3 class="period_title" id="period_title_1">Period 1</h3>
        <div class="col-md-4">
            <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.blue_team') }}}</label>
            <input class="form-control" type="text" name="blue_team_period_1" id="blue_team_period_1" />    
        </div>
        <div class="col-md-4">
            <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.grey_team') }}}</label>
            <input class="form-control" type="text" name="grey_team_period_1" id="grey_team_period_1" />    
        </div>
        <div class="col-md-4">
            <label class="control-label" for="num_periods">{{{ Lang::get('admin/teams/terms.black_team') }}}</label>
            <input class="form-control" type="text" name="black_team_period_1" id="black_team_period_1" />  
        </div>
    </div>
    <!-- ./ Period scores -->   

    <div id="add_clones_here">

    </div>

我不知道如何修改文本框的id和名称。我也遇到了显示正确的期间号码（h3标签）的问题

编辑：解决方案：

    function clearClones(){
        $('.initial_clone_div').each(function (i) {
            $(this).remove();
        });
    }

    $('#num_periods').change(function () {
        $div =  $('.initial_clone_div:first');
        clearClones();
        for (var j = 1; j <= $('#num_periods').val(); j++) {
            $div.clone()
                .appendTo('#outer_div')
                .find('input')
                .each(function (k, v) {
                    if(k+1 == 1)
                        var team = "blue";
                    else if(k+1 == 2)
                        var team = "grey";
                    else if(k+1 == 3)
                        var team = "black";

                var theId = team+ 'team_period_' + (j);
                $(v).attr('id', theId);
                $(v).attr('placeholder', theId);
            });
        }
    });

Answer 1

我创建了一个小提琴（LINK），应该很容易理解如何做到这一点。

<强> HTML

<select id="select"></select>
<div id="outerDiv">
    <div id="theDiv">
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </div>
</div>

<强> JS

// Create dropdown
for (var i = 0; i < 11; i++) {
    $('#select').append('<option value="' + i + '">Clone ' + i + ' Times</option>');
}

// Do main procedure
var inc=1;

$('#select').change(function () {
    inc++
    for (var j = 0; j <= $('#select').val(); j++) {
        $('#theDiv').clone()
            .appendTo('#outerDiv')
            .find('input')
            .each(function (k, v) {
            var theId = 'input_' +inc+ '_' + (j + 1) + '_' + (k + 1);
            $(v).attr('id', theId);
            $(v).attr('placeholder', theId);
        });
    }
});

Answer 2

1）获取将要克隆的元素的id。由于您只想增加数字，因此必须根据_

进行拆分

var sp = $('.initial_clone_div:first').prop('id').split('_');

2）将sp数组的最后一个索引转换为数字并递增它。然后再次转换回string dataType。

sp[3] = (+sp[3]+1).toString();

3）现在加入并将newId设置为克隆元素。

4）.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

var newId = sp.join('_');
var $newdiv = $('.initial_clone_div:first').clone(true, true).prop('id', newId);

使用下拉菜单Jquery选项克隆div

2 个答案: