我有一堆重复的select2元素,所以我创建了一些方法来帮助设置它们:
function setupDropDown(element, placeholderText, data) {
$(element).select2({
dropdownAutoWidth: true,
placeholder: placeholderText,
data: function () { return { results: data }; }
});
}
所以我可能会有这样一行代码:
setupDropDown(MakeSelector, "Select a Make", makes);
并且'制造'是一个全局范围的数组,我希望能够更新:
var makes = [{ id: 0, text: "Dodge" }, { id: 1, text: "Chrysler" }];
我希望能够更改make数组并立即显示在下拉菜单中,但更改不会显示。但是,如果我直接引用全局变量而不是通过'数据'参数,它实际上工作正常。所以改变后的工作函数可能如下所示:
function setupDropDown(element, placeholderText) {
$(element).select2({
dropdownAutoWidth: true,
placeholder: placeholderText,
data: function () { return { results: makes }; }
});
}
这里发生了什么?数据参数是否只包含对make的引用?它是通过值传递或在某些时候深度复制而不是复制引用。
更新
好的,这个小提琴显示了这个概念:http://jsfiddle.net/kinetiq/8o85h8s2/
现在看看这个小提琴,我做同样的事情,除了通过参数传递数组:http://jsfiddle.net/kinetiq/gp2bav4v/1/
答案 0 :(得分:2)
这是因为当您使用参数....最初data
和makes
引用同一个对象但是当您说makes = <new object>
时,现在data
仍然是makes
引用旧引用但var makes = {src : [{ id: 0, text: "Dodge" }, { id: 1, text: "Chrysler" }]};
setupDrop('#selectMake', 'Select a Make', makes);
function setupDrop(element, placeholderText, contents) {
$(element).select2({
dropdownAutoWidth: true,
placeholder: placeholderText,
data: function () { return { results: contents.src }; }
});
}
$('#changeArray').click(function() {
makes.src = [{ id: 0, text: "Buick" }, { id: 1, text: "Ford" }];
});
引用新对象...
一个简单的解决方案是使用另一个对象来保存数组引用并将新对象作为参数传递
{{1}}
演示:Fiddle
答案 1 :(得分:1)
这不会起作用,因为只有当您调用函数element.select2
时才会调用setupDrop
因此,在更改数组后,element.select2
未被调用。
在更改setupDrop
之后,您必须调用函数makes
。因为此处您正在将makes
的引用更改为另一个数组,并且该函数引用了较旧的数组。
或者另一个解决方案不要更改makes
的引用,请执行changeArray
$('#changeArray').click(function() {
makes[0] = { id: 0, text: "Buick" };
makes[1] = { id: 1, text: "Ford" };
});
答案 2 :(得分:1)
更新全局数组makes
时,push
和pop
值会打开和关闭,而不是将makes
的值设置为新的数组实例。这样,您的data
参数仍然保留对原始数组的引用。
while (makes.length) {
makes.pop();
}
var newValues = [{ id: 0, text: "Buick" }, { id: 1, text: "Ford" }];
[].push.apply(makes, newValues);
这是一个工作小提琴 - http://jsfiddle.net/kavun/uwcxthy2/