Select2.js：为什么id与删除的更改文本相同？

JSfiddle： http ： //jsfiddle.net/cjVSj/

我有一个简单的select2，其中可能的标签范围由tags选项设置，预加载的标签由html中输入字段中的值设置。

当on更改事件在select2上触发时，删除的项似乎丢失其id，而是报告其文本值。

要查看问题，添加标记（例如west）会正确报告added.id，但删除现有的东标记会报告id = east，而不是1356。

有关如何在删除时访问标记的ID的任何见解？

HTML：

 var tags = [{ "id": 1354, "text": "north", "restricted": false }, {"id": 1355, "text": "south", "restricted": false }, {"id": 1356, "text": "east", "restricted": false }, {"id": 1357, "text": "west", "restricted": false }]; tags:  

JS：

  $(document).ready(function () { $('#mytags').select2({ placeholder: 'Search', allowClear: true, minimumInputLength: 2, multiple: true, tags: tags, tokenSeparators: [','], }); $('#mytags').on("change", function (e) { console.log("change " + JSON.stringify({ val: e.val, added: e.added, removed: e.removed })); if (e.added) { alert('added: ' + e.added.text + ' id ' + e.added.id) } else if (e.removed) { alert('removed: ' + e.removed.text + ' id ' + e.removed.id) } }); }); 

Answer 1

您的select2声明和语法存在问题。

此外，如果您输入任何其他文本，例如“eas”或“test”，您的代码就会反映出原样。 检查此方案。

更新小提琴： http ： //jsfiddle.net/ZBf5H/

具体而言，您没有为您的代码提供适当的映射。 请从这里找到如何访问select 2中的远程数据

代码更改如下：

 $(document).ready(function() { var data=[{id:1354,text:'north',restricted:false}, {id:1356,text:'east',restricted:false}, {id:1357,text:'west',restricted:false}, {id:1355,text:'south',restricted:false}]; function format(item) { return item.text; } $('#mytags').select2({ placeholder: 'Search', allowClear: true, minimumInputLength: 2, multiple: true, tags: tags, tokenSeparators: [','], data:{ results: data, text: 'text' }, formatSelection: format, formatResult: format }); 

如果这对您有用，请告诉我。

Answer 2

好的…我有一个可行的解决方案，但我仍然不完全理解select2的标签和数据选项之间的区别….

JSfiddle： http ： //jsfiddle.net/7e8Pa/

我正在通过数组中的数据选项初始化带有所有可能标记的列表的select2，然后选择那些用于预加载：initSelection函数检查数据中的ID并在数据数组中查找它们（预先存储的数据，而不是选择二的）。 最后，可以添加新标签（createSearchChoice执行此操作）。 要将它挂钩到我的服务器，我只是要插入ajax调用，如下所述在on-change事件处理程序中（在createSearchChoice之后调用，并且可以覆盖createSearchChoice中新对象集的字段值）。

JS：

 function findWithAttr(array, attr, value) { for (var i = 0; i < array.length; i += 1) { if (array[i][attr] == value) { return array[i]; } } } $(document).ready(function () { function format(item) { return item.text; } $('#mytags').select2({ placeholder: 'Search', minimumInputLength: 2, multiple: true, //tags: tags, tokenSeparators: [','], data: { results: tags, text: 'text' }, initSelection: function (element, callback) { var data = []; $($('#mytags').val().split(",")).each(function (i) { var o = findWithAttr(tags, 'id', this); if (o) { data.push({ id: o.id, text: o.text }); } else { console.log("findWithAttr returned none; likely invalid id"); } }); console.log("data = " + JSON.stringify(data)); callback(data); }, createSearchChoice: function (term, data) { console.log("create"); if ($(data).filter(function () { return this.text.localeCompare(term) === 0; }).length === 0) { // call $.post() to add this term to the server, receive back id // return {id:id, text:term} // or detect this shiftiness and do it below in the on-change return { id: -1, text: term }; } }, formatSelection: format, formatResult: format }); $('#mytags').on("change", function (e) { console.log("change " + JSON.stringify({ val: e.val, added: e.added, removed: e.removed })); if (e.added) { alert('added: ' + e.added.text + ' id ' + e.added.id); //modifying the id here overrides what is assigned above in createSelection e.added.id = 5; } else if (e.removed) { alert('removed: ' + e.removed.text + ' id ' + e.removed.id); } var selections = (JSON.stringify($('#mytags').select2('data'))); $('#selectedText').text(selections); }); }); 

HTML：

  
tags:  
 
Selected Options:  
 
Debug: