我有一個動態生成的選擇框。如果需要,我希望允許用戶創建此選擇框的更多副本,但我想避免額外的數據庫調用,因此我想使用clone()而不是AJAX load()。問題是我需要在每個選擇框後輸入一個字段,所以用戶可以輸入一個值。 clone()方法按預期工作,創建一個新的選擇框和輸入框。副作用是克隆()也克隆了輸入字段元素值,該值也需要爲value =「」。任何建議,將不勝感激。JQuery克隆設計模式()
// set_add_delete_links makes sure that we dont show a [-] button
// if there is only 1 element
// and that we only show a [+] button on the last element
function set_add_delete_links(){
$('.remove_cat').show();
$('.add_cat').hide();
$('.add_cat:last').show();
$("#product_categories > .category_block:only-child > .remove_cat").hide();
}
function removeselect(s){
$(s).parent().remove();
set_add_delete_links();
return false;
}
function addselect(s){
$('#product_categories > .category_block:last').after(
$('#product_categories > .category_block:last').clone()
);
set_add_delete_links();
return false;
}
$(document).ready(
function(){
set_add_delete_links();
}
);
<div id="product_categories">
<div class="category_block">
<select name="category_ids[]" id="cat_list">
<option value="">Select a Property</option>
<option value="1770">Foo0</option>
<option value="1773">Foo1</option>
<option value="1775">Foo2</option>
<option value="1765">Foo3</option>
<option value="1802">Foo4</option>
<option value="1766">Foo5</option>
</select>
<input class="specsinput" type="text" name="specs[]" value="" />
<a href="#" onClick="return removeselect(this);" class="remove_cat"> [-] </a>
<a href="#" onClick="return addselect(this);" class="add_cat"> [+] </a>
</div>
</div>