我有关于克隆的相反问题。我有一个表单，想要克隆一行（确切地说是2行）。我可以克隆div和输入，但是没有任何值可以克隆。
我在Google和Google上进行了大量搜索，但却找不到解决方案。我阅读了jQuery clone的API，但它说默认行为是使用值复制输入字段。
//define template
var template = $('#termekek .row:first').clone();
//define counter
var sectionsCount = 1;
//add new section
$('body').on('click', '.addsection', function() {
//increment
sectionsCount++;
//loop through each input
var section = template.clone().find(':input').each(function(){
//set id to store the updated section number
var newId = this.id + sectionsCount;
//update for label
$(this).prev().attr('for', newId);
//update id
this.id = newId;
//set a top border to separate sections
$(this).parent().parent().parent().parent().parent().css({
"border-top-color": "#f2f2f2",
"border-top-width": "10px",
"border-top-style": "solid",
"padding-top": "10px"
});
}).end()
//inject new section
.appendTo('#termekek');
// find('input.date').removeClass('hasDatepicker').datepicker({dateFormat:'dd/mm/yy'});
return false;
});
//remove section
$('#termekek').on('click', '.remove', function() {
//fade out section
$(this).parent().fadeOut(300, function(){
//remove parent element (main section)
$(this).parent().parent().empty();
return false;
});
return false;
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row"><!-- Termék adatok -->
<div class="col-sm-12">
<div class="card-box">
<h4 class="m-t-0 m-b-30">Why not clone the value?</h4>
<div id="termekek">
<div class="row">
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-2">
<div class="form-group">
<fieldset class="form-group">
<label class="form-control-label" for="supplier">Select 1:</label>
<select class="form-control select2 orderSupplier" id="supplier" name="supplier[]">
<option value="Opt 1">Option 1</option>
<option value="Opt 2">Option 2</option>
<option value="Opt 3">Option 3</option>
</select>
</fieldset>
</div>
</div><!-- end col -->
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-2">
<div class="form-group">
<fieldset class="form-group">
<label class="form-control-label" for="productType">Select 2:</label>
<select class="form-control orderProductType" name="productType[]">
<option value="Opt 1">Opt 1</option>
<option value="Opt 2">Opt 2</option>
<option value="Opt 3">Opt 3</option>
<option value="Opt 4">Opt 4</option>
</select>
</fieldset>
</div>
</div><!-- end col -->
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-2">
<div class="form-group">
<fieldset class="form-group">
<label class="form-control-label" for="productName">Select 3:</label>
<select class="form-control select2 orderProductName" id="productName" name="productName[]">
<option value="Opt 1">Option 1</option>
<option value="Opt 2">Option 2</option>
<option value="Opt 3">Option 3</option>
</select>
</fieldset>
</div>
</div><!-- end col -->
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-1">
<div class="form-group">
<label class="form-control-label">Quantity:</label>
<input class="form-control orderQuantity" type="text" name="quantity[]">
</div>
</div><!-- end col -->
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-3">
<div class="form-group">
<label class="form-control-label">Date 1:</label>
<div class="input-group">
<input class="form-control orderDeliveryDate" type="date" name="deliveryDate[]" id="deliveryDate">
<span class="input-group-addon bg-custom b-0"><i class="icon-calender"></i></span>
</div>
</div>
</div><!-- end col -->
</div> <!-- end row -->
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-2">
<div class="form-group">
<label class="form-control-label">Input text:</label>
<input class="form-control orderCarrier" type="text" name="carrier[]">
</div>
</div><!-- end col -->
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-2">
<div class="form-group">
<label class="form-control-label">Date 2:</label>
<div class="input-group">
<input class="form-control orderArrivalDate" type="date" name="arrivalDate[]" id="arrivalDate">
<span class="input-group-addon bg-custom b-0"><i class="icon-calender"></i></span>
</div>
</div>
</div><!-- end col -->
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-2 col-xl-offset-1">
<div class="form-group">
<fieldset class="form-group">
<label class="form-control-label" for="deliveryMethod">Select 4:</label>
<select class="form-control orderDeliveryMethod" name="deliveryMethod[]">
<option value="Opt 1">Option 1</option>
<option value="Opt 2">Option 2</option>
<option value="Opt 3">Option 3</option>
</select>
</fieldset>
</div>
</div><!-- end col -->
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-1" align="center">
<div class="form-group checkbox checkbox-primary checkbox-single">
<p style="font-weight: 500; display: inline-block; padding: 0.375rem 1rem 0.375rem 0; margin-bottom: 0;">Checkbox</p>
<!--<div class="switchery">-->
<input type="hidden" name="ekaer[]" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value" id="ekaer">
<label class="form-control-label" for="ekaer" style="display: hidden;"></label>
<!--</div>-->
</div>
</div><!-- end col -->
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-2">
<div class="form-group">
<fieldset class="form-group">
<label class="form-control-label" for="status">Another select</label>
<select class="form-control order_status" name="status[]">
<option value="Opt 1">Option 1</option>
<option value="Opt 2">Option 2</option>
<option value="Opt 3">Option 3</option>
</select>
</fieldset>
</div>
</div><!-- end col -->
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-1">
<button type="button" name="remove" id="remove" class="btn btn-secondary active remove">-</button>
</div>
</div><!-- end row -->
</div> <!-- end row -->
</div> <!-- end #termekek -->
<div align="left">
<button type="button" name="add" id="add" class="btn btn-primary addsection">+</button>
</div>
</div><!-- end card box -->
</div><!-- end col -->
</div><!-- end row -->
</body>
</html>
我想在克隆时始终复制最后一行及其值。
出了什么问题？有人可以帮帮我吗？
谢谢！
答案 0 :(得分：0)
我在代码中进行了更改，因此现在可以完美地运行：
//define template
var template = $('#contacts .row:first').clone();
//define counter
var sectionsCount = 1;
//add new section
$('body').on('click', '.addContact', function() {
//increment
sectionsCount++;
//loop through each input
var section = template.clone().find(':input').each(function(){
//set id to store the updated section number
var newId = this.id + sectionsCount;
//update for label
$(this).prev().attr('for', newId);
//update id
this.id = newId;
}).end()
//inject new section
.appendTo('#contacts');
return false;
});
//remove section
$('#contacts').on('click', '.removeContact', function() {
//fade out section
$(this).parent().fadeOut(300, function(){
//remove parent element (main section)
$(this).parent().empty();
return false;
});
return false;
});