Repeating control in jQuery -

Repeating control in jQuery -

i have command 2 textboxes , select box in 1 row. user can add together or remove set of these rows. need in jquery. have links sort of feature/plugin in jquery

i've posted quick and, fairly, dirty means of doing on over jsbin, js , css below:

javascript/jquery:

$(document).ready( function() { $('span.add').live('click', function() { var lastrow = parseint($('fieldset:last-child').attr('id').slice('1')), newrow = lastrow+1, newxhtml = '<label for="inputrow' + newrow + '">label text</label> <input type="text" name="inputrow' + newrow + '" id="inputrow' + newrow + '" <label for="selectrow' + newrow + '">label text</label> <select name="selectrow'+newrow+' id="selectrow'+newrow+'><optgroup label="something"><option value="thisval">this value</option><option value="thatval">that value</option></optgroup></select><span class="adddelete"><span class="delete">x</span><span class="add">+</span></span>'; $('form').append('<fieldset id="_' + newrow + '" />'); $('form fieldset:last-child').prepend(newxhtml); } ); $('span.delete').live('click', function() { if ($('fieldset').length > 1) { $(this).closest('fieldset').remove(); } } ); } );

css:

fieldset { width: 40em; margin: 1em auto; font-size: 0.8em; } fieldset input, fieldset label { display: inline; width: auto; } span.adddelete { float: right; } span.adddelete span { border: 1px solid #000; color: #000; font-weight: bold; margin: 0 0.2em 0 0; } span.delete { background-color: #f00; } span.add { background-color: #0f0; }

there's relatively big issue of how you're generating dynamically-added select boxes, leave -happily- excercise you, , there's far, far nicer means of generating newxhtml variable, chose leave simplicity.

the current implementation, due if ($('fieldset').length > 1) assessment prevents user deleting all fieldsets, doesn't prevent them deleting particular fieldset. may wish sanity-check approach. if have questions, please sense free inquire in comments and, well, i'll best =)

jquery jquery-ui