Jquery, динамически добавленные цепочки выбирает

Question

У меня проблема с этим плагином jQuery, который работает с select s.

Здесь - это мой код HTML и Javascript. Он немного большой, в основном из-за множества option s в select.

Сначала он работает нормально - успешно копирует целевые элементы. Но после этого он перестает работать.

Я пытался исправить это в течение двух дней и не знаю, что делать. Я alert использовал все переменные в плагине и обнаружил, что у резервной переменной нет нужных данных, и когда она создает элемент с #location[2], он также вызывает плагин для #location[1].

Лучшее описание проблемы У меня было три выбора с ф.э .: марка, модель, цвет

Допустим, значения могут быть:

для бренда: Iphone, Nokia; для модели: 4с, 5800; для цвета: черный, белый, синий, красный

и там 'должны быть только эти опции:

Iphone -> 4s -> черный / белый

Nokia -> 5800 -> синий / красный

поэтому, когда я выбираю nokia -> 5800, я не хотел, чтобы отображался параметр «белый» или «черный».

Я использовал для этого плагин jQuery (я связал его выше), и он отлично работает.

Проблема : У меня есть кнопка, чтобы добавить еще одну строку этого выбора, и этот плагин просто перестает работать после вставки нескольких строк. Я знаю, что проблема в плагине с переменной backup

Может кто-нибудь сказать, в чем причина проблемы?

Answer 1

Для тех, у кого проблемы с этим классом, я исправил это так:

Я сделал (резервную) копию каждого выбора с помощью $().clone(). Затем, вставив еще одну строку выбора, я сохранил в $(".select_to_be_chained").data("original_ref", $(".copy") ) ссылку на эту копию выбора и затем связал ее.

Чтобы сделать это, вам нужно отредактировать свой jquery.chained.js :

найди это: $(self).html(backup.html());

заменить его на:

// Select data from original_reference (if theres any)
// otherway select data from backup variable
if( ! $(self).data('original_ref') ) $(self).html(backup.html());
else $(self).html( $($(self).data('original_ref')).html() );

ПРИМЕР ИСПОЛЬЗОВАНИЯ

// lets assume that we have in html 1st row of selects
// we only need to create a backup elements
var backup_brand = $("select.brand").clone(1);
var backup_model = $("select.model").clone(1);
var backup_color = $("select.color").clone(1);

// now we can chain that 1st row
$("select.color").chained( $("select.model") );
$("select.model").chained( $("select.brand") );

var row = 1;  // how many rows do we have?
function add_row()
{
    row++;
    // lets clone selects
    $("select.brand").clone(1);
    $("select.model").clone(1);
    $("select.color").clone(1);

    $(".all_three_selects").insertBefore("button"); // lets assume that we inserted all three selects in DOM

    // lets chain them
    // 1st we need to set reference to original data (backup)
    $("select.our_cloned_model").data("original_ref", backup_model );
    $("select.our_cloned_color").data("original_ref", backup_color );
    // now we can chain them
    $("select.our_cloned_color").chained( $("select.our_cloned_model") );
    $("select.our_cloned_model").chained( $("select.our_cloned_brand") );
}

Я не проверял пример, но у него появилась идея, как я его использую, и он работает, я надеюсь, что все, кому это понадобится, поймут это