Клон не клонує вибрані значення

Я не очікував цього, але наступний тест не вдається перевірити клоноване значення:

test("clone should retain values of select", function() {
    var select = $("<select>").append($("<option>")
                              .val("1"))
                              .append($("<option>")
                              .val("2"));
    $(select).val("2");
    equals($(select).find("option:selected").val(), "2", "expect 2");
    var clone = $(select).clone();
    equals($(clone).find("option:selected").val(), "2", "expect 2");
});

Чи це правильно?

Після подальших досліджень я знайшов цей квиток у системі відстеження помилок JQuery, яка пояснює цю помилку та забезпечує роботу. Мабуть, клонувати вибрані значення занадто дорого, щоб вони не виправили це.

https://bugs.jquery.com/ticket/1294

Моє використання методу clone було у загальному методі, де що-небудь могло бути клоновано, тому я не впевнений, коли і чи буде вибрано значення для встановлення значення. Тому я додав наступне:

var selects = $(cloneSourceId).find("select");
$(selects).each(function(i) {
    var select = this;
    $(clone).find("select").eq(i).val($(select).val());
});

Ось виправлена ​​версія методу клонування для jQuery:

https://github.com/spencertipping/jquery.fix.clone

// Textarea and select clone() bug workaround | Spencer Tipping
// Licensed under the terms of the MIT source code license

// Motivation.
// jQuery's clone() method works in most cases, but it fails to copy the value of textareas and select elements. This patch replaces jQuery's clone() method with a wrapper that fills in the
// values after the fact.

// An interesting error case submitted by Piotr Przybył: If two <select> options had the same value, the clone() method would select the wrong one in the cloned box. The fix, suggested by Piotr
// and implemented here, is to use the selectedIndex property on the <select> box itself rather than relying on jQuery's value-based val().

(function (original) {
  jQuery.fn.clone = function () {
    var result           = original.apply(this, arguments),
        my_textareas     = this.find('textarea').add(this.filter('textarea')),
        result_textareas = result.find('textarea').add(result.filter('textarea')),
        my_selects       = this.find('select').add(this.filter('select')),
        result_selects   = result.find('select').add(result.filter('select'));

    for (var i = 0, l = my_textareas.length; i < l; ++i) $(result_textareas[i]).val($(my_textareas[i]).val());
    for (var i = 0, l = my_selects.length;   i < l; ++i) result_selects[i].selectedIndex = my_selects[i].selectedIndex;

    return result;
  };
}) (jQuery.fn.clone);

Зробив плагін з відповіді Chief7:

(function($,undefined) {
    $.fn.cloneSelects = function(withDataAndEvents, deepWithDataAndEvents) {
        var $clone = this.clone(withDataAndEvents, deepWithDataAndEvents);
        var $origSelects = $('select', this);
        var $clonedSelects = $('select', $clone);
        $origSelects.each(function(i) {
            $clonedSelects.eq(i).val($(this).val());
        });
        return $clone;
    }
})(jQuery);

Тільки коротко перевірив, але, здається, це працює.

Мій підхід трохи інший.

Замість того, щоб змінювати виділення під час клонування, я просто спостерігаю за кожною selectсторінкою для changeподії, а потім, якщо значення змінено, я додаю необхідний selectedатрибут до вибраного, <option>щоб він став <option selected="selected">. Оскільки виділення тепер позначено в <option>розмітці, він буде переданий, коли ви це зробите.clone() це .

Єдиний код, який вам потрібен:

//when ANY select on page changes its value
$(document).on("change", "select", function(){
    var val = $(this).val(); //get new value
    //find selected option
    $("option", this).removeAttr("selected").filter(function(){
        return $(this).attr("value") == val;
    }).first().attr("selected", "selected"); //add selected attribute to selected option
});

І тепер ви можете скопіювати вибраний спосіб будь-яким способом, і воно також скопіює його значення.

$("#my-select").clone(); //will have selected value copied

Я думаю, що це рішення менш звичне тому вам не потрібно турбуватися, якщо ваш код зламається, якщо ви щось зміните пізніше.

Якщо ви не хочете, щоб він застосовувався до кожного виділення на сторінці, ви можете змінити селектор у першому рядку, наприклад:

$(document).on("change", "select.select-to-watch", function(){

Спрощення відповіді Chief7:

var cloned_form = original_form.clone()
original_form.find('select').each(function(i) {
    cloned_form.find('select').eq(i).val($(this).val())
})

Знову ж, ось квиток jQuery: http://bugs.jquery.com/ticket/1294

Так. Це пов’язано з тим, що властивість 'selected' вузла DOM 'select' відрізняється від атрибута 'selected' параметрів. jQuery жодним чином не змінює атрибути параметрів.

Спробуйте замість цього:

$('option', select).get(1).setAttribute('selected', 'selected');
//    starting from 0   ^

Якщо вас дійсно цікавить, як працює функція val, можливо, ви захочете вивчити

alert($.fn.val)

Клонування <select>зовсім НЕ копіювати value=власність на<option> с. Тож плагін Марка працює не у всіх випадках.

Щоб виправити, зробіть це перед клонуванням <select>значень:

var $origOpts = $('option', this);
var $clonedOpts = $('option', $clone);
$origOpts.each(function(i) {
   $clonedOpts.eq(i).val($(this).val());
});

Інший спосіб клонування, який <select>параметр вибрано, у jQuery 1.6.1 + ...

// instead of:
$clonedSelects.eq(i).val($(this).val());

// use this:
$clonedSelects.eq(i).prop('selectedIndex', $(this).prop('selectedIndex'));

Останнє дозволяє встановити <option>значення після встановлення selectedIndex.

$(document).on("change", "select", function(){
    original = $("#original");
    clone = $(original.clone());
    clone.find("select").val(original.find("select").val());

});

Якщо вам просто потрібно значення select, щоб серіалізувати форму або щось подібне, це працює для мене:

$clonedForm.find('theselect').val($origForm.find('theselect').val());

Після 1 години випробувань різних рішень, які не спрацювали, я створив це просте рішення

$clonedItem.find('select option').removeAttr('selected');
$clonedItem.find('select option[value="' + $originaItem.find('select').val() + '"]').attr('selected', 'true');

@ pie6k показати гарну ідею.

Це вирішило мою проблему. Я змінюю його трохи маленьким:

$(document).on("change", "select", function(){
    var val = $(this).val();
    $(this).find("option[value=" + val + "]").attr("selected",true);
});

просто звітуючи. З якоїсь невідомої причини, і хоча це було перше, що я перевірив, і я не змінив свого коду, зараз

$("#selectTipoIntervencion1").val($("#selectTipoIntervencion0").val());

підхід працює. Я не уявляю, чому і якщо це знову перестане працювати, як тільки я щось зміню, але поки я піду з цим. Дякуємо усім за допомогу!