jQuery的克隆链接选择(jQuery clone chained selects)

我刚刚从开始： http://jsfiddle.net/FJFFJ/1/ （由链动态创建的jQuery下拉菜单）

这确实不错，但现在我需要改变一下：克隆选择的最后一组。

即：

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

然后，如果我点击“+”，它会克隆

Chile | Santiago | Chiñihue

而不是第一个。

这实际上是一个更难的问题比我想象的那样。显然，当你克隆的集合中选择元素，也改变不了以不被显示的东西。我花了大约一个小时左右，以弄清楚到底发生了什么事情，很好的挑战，谢谢！

我清盘做的就是克隆你的模板，并手动更改的值，并手动调用“改变”事件，使正确的选项将在二，三元选择元素可用。

版本1： http://jsfiddle.net/m4JTQ/2/

第2版（这是一个修改版本摆脱我的迭代器： http://jsfiddle.net/Zf7xb/1/

下面是情况下的jsfiddle最终消失的代码。

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

不，我在这个版本的迭代器，这是一个有点清洁。

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