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

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

Вот мой код HTML и Javascript. Он немного большой, в первую очередь из-за множества option в select.

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

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

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

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

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

и там должны быть только эти варианты:

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

Nokia → 5800 → синий/красный

поэтому, когда я выбираю nokia → 5800, мне не нужна опция "белый" или "черный".

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

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

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

1 ответ

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

Я сделал (резервную) копию каждого select с помощью $().clone(). Затем после вставки другой строки selects я сохранил значение $(".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") );
}

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

licensed under cc by-sa 3.0 with attribution.