我有 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);
});
}
});
我创建了一个小提琴(链接),应该很容易理解如何做到这一点。
.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);
});
}
});
1) 获取要克隆的元素的id
。 由于您只想增加数字,因此必须根据_
进行拆分
var sp = $('.initial_clone_div:first').prop('id').split('_');
2)将数组的最后一个索引转换为数字并递增sp
。 然后再次转换回string
数据类型。
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);