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

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

我创建了一个 fiddle (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);
        });
    }
});