Шаблон проектирования для клона JQuery () - PullRequest
Новая
       7

Шаблон проектирования для клона JQuery ()

0 голосов
/ 11 мая 2010

У меня есть поле выбора, которое генерируется динамически. Я хочу, чтобы пользователи могли создавать больше копий этого поля выбора, если им это необходимо, но я хочу избежать дополнительных вызовов базы данных, поэтому я хочу использовать 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>

Ответы [ 3 ]

1 голос
/ 11 мая 2010 
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;
}
1 голос
/ 11 мая 2010

Попробуйте: 

var myClone = $('#product_categories > .category_block:last').clone();
$('input.specsinput', myClone).val(''); // clear the value of the input
0 голосов
/ 11 мая 2010

Выполните некоторую обработку клонированного сегмента DOM.

Как: 

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