jQuery clone链接选择

Question

我刚刚开始：http://jsfiddle.net/FJFFJ/1/（Chain dynamically created dropdowns with JQuery）

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

即：

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

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

Chile | Santiago | Chiñihue

而不是第一个。

Answer 1

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

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

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

版本2（这是一个修改后的版本，摆脱了 i 迭代器：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'));
}

---

此版本中没有 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'));
}