jQuery克隆链接选择 [英] jQuery clone chained selects

问题描述

我刚从以下地方开始: http://jsfiddle.net/FJFFJ/1/(通过使用JQuery链动态创建下拉列表)

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.

即:

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

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

Then, if I click at "+", it will clone

Chile | Santiago | Chiñihue

而不是第一个.

推荐答案

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

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!

我最后要做的是克隆模板并手动更改值，然后手动调用"change"事件，以便正确的选项在第二和第三SELECT元素中可用.

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.

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

版本2(这是摆脱 i 迭代器的修改版本: http ://jsfiddle.net/Zf7xb/1/

Version 2 (this is a modified version getting rid of the i iterator: http://jsfiddle.net/Zf7xb/1/

这是jsfiddle最终消失的代码.

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

---

在此版本中，

没有 i 迭代器，它有点干净.

---

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

这篇关于jQuery克隆链接选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！