Question

我有一个动态生成的选择框。我想允许用户在需要时创建更多此选择框的副本，但我想避免额外的数据库调用，因此我想使用clone（）而不是AJAX load（）。问题是我需要在每个选择框后面输入一个输入字段，因此用户可以输入一个值。 clone（）方法按预期运行，创建一个新的选择框和输入框。这样做的副作用是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

尝试：

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

Answer 2

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 3

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

像：

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

JQuery clone（）的设计模式

3 个答案: