jQuery 克隆链接选择

我刚刚开始：http://jsfiddle.net/FJFFJ/1/ http://jsfiddle.net/FJFFJ/1/ (by 使用 JQuery 链接动态创建的下拉菜单 https://stackoverflow.com/q/5545229/1513125)

这真的很好，但现在我需要做一些改变：克隆最后一组选择。

ie.:

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

然后，如果我单击“+”，它将克隆

Chile | Santiago | Chiñihue

而不是第一个。

这实际上是一个比我想象的更难的问题。显然，当您克隆 SELECT 元素集时，它无法更改为未显示的内容。我花了大约一个小时左右才弄清楚到底发生了什么，很好的挑战，谢谢！

我最终要做的是克隆模板并手动更改值并手动调用“更改”事件，以便在辅助和三元 SELECT 元素中提供正确的选项。

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

版本 2（这是一个修改版本，删除了i迭代器：http://jsfiddle.net/Zf7xb/1/ 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'));
}

No i这个版本中的迭代器，它更干净一些。

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