Question

I just started from: http://jsfiddle.net/FJFFJ/1/ (by Chain dynamically created dropdowns with JQuery)

It’s really good but now I need to change a bit: clone the last group of selects.

ie.:

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

Then, if I click at “+”, it will clone

Chile | Santiago | Chiñihue

instead of the first one.

Answer 1

This is actually a harder question than I thought it would be. Apparently when you clone the set of SELECT elements it can’t change to something which isn’t displayed. Took me about an hour or so to figure out exactly what was going on, good challenge, thanks!

What I wound up doing is cloning your template and changing the values manually AND calling the “change” event manually, so that the correct options would be available in the secondary and ternary 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 the jsfiddle eventually goes away.

// 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'));
}

---

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'));
}