jQuery – Duplicate Select Boxes

jQuery – Duplicate Select Boxes

Ever wanted a allow the user to add or remove select boxes (or any other form elements for that matter) .. here’s how…

.. include jquery.js
<script language="javascript">
// set_add_del 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_del(){
$('.remove_cat').show();
$('.add_cat').hide();
$('.add_cat:last').show();
$("#product_categories > .category_block:only-child > .remove_cat").hide();
}
function selrem(clickety){
$(clickety).parent().remove();
set_add_del();
return false;
}
function seladd(clickety){
$('#product_categories > .category_block:last').after(
$('#product_categories > .category_block:last').clone());
set_add_del();
return false;
}
$(document).ready(function(){set_add_del();});
</script>
<div id="product_categories">
<div class="category_block">
<select name="category_ids[]" id="cat_list">
<option value="">- none -</option>
<option value="1">Category A</option>
<option value="2">Category B</option>
<option value="3">Category C</option>
</select>
<a href="#" onClick="return selrem(this);" class="remove_cat">-</a>
<a href="#" onClick="return seladd(this);" class="add_cat">+</a>
</div>
</div>



 


Example

Leave a Reply

Your email address will not be published. Required fields are marked *