JQuery clone clained selects

Question

I just started with: http://jsfiddle.net/FJFFJ/1/ (a chain of dynamically created dropdowns using jQuery )

This is really good, but now I need to change a bit: clone the last group of favorites.

namely:.

+- Argentina | San Juan | Rawson Chile | Santiago | Chiñihue 

Then, if I press +, it will clone

 Chile | Santiago | Chiñihue 

instead of the first.

Answer 1

This is actually a more complicated question than I thought. Apparently, when you clone a set of SELECT elements, it cannot change to what is not displayed. Took me about an hour or so to find out exactly what was happening, good call, thanks!

What I am doing is cloning your template and manually changing the values ​​and triggering the "change" event manually so that the correct parameters will be available in the secondary and triple SELECT elements.

Version 1: http://jsfiddle.net/m4JTQ/2/

Version 2 (this is a modified version, getting rid of the i iterator: http://jsfiddle.net/Zf7xb/1/

Here's the code in case jsfiddle eventually leaves.

 // Version 1 $(function() { // Iterator for the dupe ids var i = 0; $('#clone').click(function() { // put the clone() into cloned var cloned = $('#template').clone(); // Add .dupe class to cloned $(cloned).addClass('dupe'); // Set the id of cloned, use i++ instead of incrementing it elsewhere. $(cloned).attr('id', 'duplicate'+ i++); // Append cloned to #filter $(cloned).appendTo('#filter'); // Passing selector rather than iteration chainItWithId($(cloned)); // If this is NOT the first addition, do some kludge if ($('#filter div.dupe').length!==1) { // Set the previous clone to lastClone var lastClone = $(cloned).siblings('div.dupe:last'); // Set the value of .pais to the value of the previous .pais $(cloned).find('.pais').val($(lastClone).find('.pais').val()); // Do the "change" event manually. $(cloned).find('.pais').change(); // Set the value of .provincia to the value of the previous .provincia $(cloned).find('.provincia').val($(lastClone).find('.provincia').val()); // Do the "change" event manually $(cloned).find('.provincia').change(); // Set the value of .ciudad to the value of the previous .cudad $(cloned).find('.ciudad').val($(lastClone).find('.ciudad').val()); } // Show the hidden div $('#filter div:hidden').show(); }); $('#remove').click(function() { // Remove all but the very last set of options if ($('#filter > div').length > 1) { $('#filter > div').last().remove(); } }); // Manually do the "click" event $('#clone').click(); }); // Here I'm getting the cloned full selector function chainItWithId(cloned) { // Chain .provincia to .pais in the current clone $(cloned).find('.provincia').chained($(cloned).find('.pais')); // Chain .ciudad to .provincia in the current clone $(cloned).find('.ciudad').chained($(cloned).find('.provincia')); } 

---

There is no i iterator in this version, it is a bit cleaner.

 // Version 2 $(function() { $('#clone').click(function() { // put the clone() into cloned var cloned = $('#template').clone(); // Add .dupe class to cloned $(cloned).addClass('dupe'); // Set the id to the count of div.dupe elements in #filter // This will increment 0,1,2,3 as you add elements. $(cloned).attr('id', 'duplicate'+ $('#filter div.dupe').length); // Append cloned to #filter $(cloned).appendTo('#filter'); // Passing selector rather than iteration chainItWithId($(cloned)); // If this is NOT the first addition, do some kludge if ($('#filter div.dupe').length!==1) { // Set the previous clone to lastClone var lastClone = $(cloned).siblings('div.dupe:last'); // Set the value of .pais to the value of the previous .pais $(cloned).find('.pais').val($(lastClone).find('.pais').val()); // Do the "change" event manually. $(cloned).find('.pais').change(); // Set the value of .provincia to the value of the previous .provincia $(cloned).find('.provincia').val($(lastClone).find('.provincia').val()); // Do the "change" event manually $(cloned).find('.provincia').change(); // Set the value of .ciudad to the value of the previous .cudad $(cloned).find('.ciudad').val($(lastClone).find('.ciudad').val()); } // Show the hidden div $('#filter div:hidden').show(); }); $('#remove').click(function() { // Remove all but the very last set of options if ($('#filter > div').length > 1) { $('#filter > div').last().remove(); } }); // Manually do the "click" event $('#clone').click(); }); // Here I'm getting the cloned full selector function chainItWithId(cloned) { // Chain .provincia to .pais in the current clone $(cloned).find('.provincia').chained($(cloned).find('.pais')); // Chain .ciudad to .provincia in the current clone $(cloned).find('.ciudad').chained($(cloned).find('.provincia')); }