jQuery clone链接选择

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

Chile | Santiago | Chiñihue

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

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

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