Question

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

当on2更改事件触发select2时，删除的项似乎会丢失其ID，而是报告其文本值。

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

了解如何在删除时访问标记的ID？

HTML：

<script>
   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
   }]; 
</script>tags:
<input type="text" id="mytags" value="east" />

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/

具体而言，您没有为您的代码提供适当的映射。请查看如何从here

中选择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并在数据数组中查找它们（预先存储）一，而不是Select2's）。最后，可以添加新标签（createSearchChoice执行此操作）。要将它挂钩到我的服务器，我只是要插入ajax调用，如下所述，在on-change事件处理程序中（在createSearchChoice之后调用，并且可以覆盖createSearchChoice中新对象集的字段值）。 p>

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：

<script>
    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
    }];
</script>
<p>tags:
    <input type="text" id="mytags" value="1355" style="width:80%" />
</p>
<p>Selected Options: <span id="selectedText"></span>

</p>
<p>Debug: <span id="debug"></span>

</p>

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

2 个答案: