JQuery克隆设计模式（）

Question

我有一个动态生成的选择框。如果需要，我希望允许用户创建此选择框的更多副本，但我想避免额外的数据库调用，因此我想使用clone（）而不是AJAX load（）。问题是我需要在每个选择框后输入一个字段，所以用户可以输入一个值。 clone（）方法按预期工作，创建一个新的选择框和输入框。副作用是克隆（）也克隆了输入字段元素值，该值也需要为value =“”。任何建议，将不胜感激。

// 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> 

Answer 1

function addselect(s){ 
$('#product_categories > .category_block:last').after(
    $('#product_categories > .category_block:last').clone() 
    ); 
$('#product_categories > .category_block:last input').val(""); // this resets the value to "" 
set_add_delete_links(); 
return false; 
} 

Answer 2

尝试：

var myClone = $('#product_categories > .category_block:last').clone(); 
$('input.specsinput', myClone).val(''); // clear the value of the input 

Answer 3

请在DOM的克隆段进行一些处理。

像：

xxx.after($('#product_categories > .category_block:last').clone().find('input').val(''));