2011-12-22 131 views
0

我遇到了问题this jQuery插件与select s一起使用。jquery,链接动态添加选择

Here是我的HTML和Javascript代码。这有点大,主要是因为select中有许多option

它首先正常工作—它成功复制目标元素。但之后,它停止工作。

我一直在试图修复它两天,不知道该怎么做。我插入了插件中的所有变量,并发现备份变量没有正确的数据,并且在创建元素时它也调用#location[1]的插件。问题

更好的说明我有三个选择与f.e:品牌,型号,颜色

可以说该值可能是:

品牌: iPhone,诺基亚; 适用机型: 4s,5800; 颜色:黑,白,蓝,红

,有”应该是只有这些选项:

iPhone - > 4S - >黑/白

诺基亚 - > 5800 - >蓝/ red

所以当我选择诺基亚 - > 5800时,我并不想要显示“白色”或“黑色”选项。

我用jQuery插件(我把它连接到上面),它工作正常。

问题是: 我有没有按钮来添加其他行的这种选择和这个插件只是停止插入多行后工作。我知道问题是在变量插件备份

任何人都可以告诉是什么造成的问题?

+1

注意:类名应该是最少2个字符,并以字母开头,而不是数字:) – 2011-12-22 12:02:33

+0

其不是真正的类名,它是用于该“链接”插件,基于该类的数字可以使插件匹配OPTION从一个选择与从另一个选项:) – Buksy 2011-12-27 07:48:26

回答

2

对于有此类麻烦任何人,我固定它是这样的:

我做的每一次(备份)的副本选择与$().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")); 
} 

我没有测试过的例子,但它上心我如何使用它,它的工作原理,我希望每个人都需要它会明白它:)