Jquery Select2，如何在on(change)函数中访问ajax数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15102000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Select2, how to access ajax data at on(change) function?
提问by Alex Angelico
I'm using Select2 with ajax. Everything works fine, when the user click on the item they want, I use the on(change) function as specified by the documentation for doing some stuff.
我在 ajax 中使用 Select2。一切正常，当用户点击他们想要的项目时，我使用文档指定的 on(change) 函数来做一些事情。
$("#e6").on("change", function(e) {
$('input#Destination').val(e.val);
});
});
The return value (e.val) is the data.idvalue from the ajax call, but my data object has "name", "id" and "type".
返回值 (e.val) 是来自 ajax 调用的data.id值，但我的数据对象具有“ name”、“ id”和“ type”。
I can add code to dataFormatSelection() but this doesn't sound logic and is confusing.
我可以向 dataFormatSelection() 添加代码，但这听起来不合逻辑并且令人困惑。
function dataFormatSelection(data) {
console.log(data.name + "|" data.id + "|" + data.type);
return data.name;
}
How can I access the whole dataobject (instead of just data.id) at the on("change".. event?
我怎样才能访问整个数据对象（而不是只data.id的）上（“变” ..事件？
回答by WebPal
$("#e6").on('change', function(e) {
// Access to full data
console.log($(this).select2('data'));
});
回答by Primoz Rome
According to Select2 docschange event should have 3 properties: The event object contains the following custom properties:
根据Select2 docschange event 应该有 3 个属性： event 对象包含以下自定义属性：
- val: the current selection (taking into account the result of the change) - id or array of ids
- added: the added element, if any - the full element object, not just the id
- removed: the removed element, if any - the full element object, not just the id
- val：当前选择（考虑更改的结果）- id 或 id 数组
- 添加：添加的元素，如果有的话 - 完整的元素对象，而不仅仅是 id
- 删除：删除的元素，如果有的话 - 完整的元素对象，而不仅仅是 id
There is even example:
甚至还有一个例子：
$("#e11").select2({
placeholder: "Select value ...",
allowClear: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
$("#e11_2").select2({
placeholder: "Select value ...",
multiple: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
$("#e11").on("change", function(e) {
console.log(JSON.stringify({val:e.val, added:e.added, removed:e.removed}));
}).on("open", function() {
console.log("open");
});
$("#e11_2").on("change", function(e) {
console.log(JSON.stringify({val:e.val, added:e.added, removed:e.removed}));
}).on("open", function() {
console.log("open");
});
But I noticed that addedand removedproperties are only present when multiple: trueis on. I don't know if this is by design or is it bug. I am going to report it anyway, because having the selected element available on change is definitely something needed.
但我注意到addedandremoved属性仅在multiple: true打开时存在。我不知道这是设计使然还是错误。无论如何我都会报告它，因为在更改时可以使用选定的元素绝对是需要的。
回答by PX10
I have doubt... How I can take the values showing in the console log and use it?
我有疑问...如何获取控制台日志中显示的值并使用它？
it's correct if i take these values and put each one into a var? Because if I use console.log(var) for any var created the value is displayed but if a do an alert(var) the alert is never shown.
如果我采用这些值并将每个值放入 var 中，这是正确的吗？因为如果我对创建的任何 var 使用 console.log(var) ，则显示该值，但如果执行 alert(var) ，则永远不会显示警报。
I need to take the value of the option selected to call with AJAX a PHP function.
我需要取所选选项的值以使用 AJAX 调用 PHP 函数。
$("#e11").on('change', function(e) {
//I create a var data and works it like an Array
var data = $(this).select2('data');
//Then I take the values like if I work with an array
var value = data.id;
var text = data.text;
//If I use console.log(var) the values are displayed but not with an alert
}
Thanks!!!
谢谢！！！
