select2，删除选项更改数据，但不更改值答案

【问题标题】：select2, remove option changes data, but not valueselect2，删除选项更改数据，但不更改值
【发布时间】：2014-11-20 03:11:37
【问题描述】：

我将 Select2 用于我的标记应用程序。但是，我无法删除项目上的现有标签。它不一致，但似乎取决于项目；在以下示例中，我始终可以删除标签“Bugs”，但无论我尝试这样做的顺序如何，其他标签都无法删除。

控制台日志显示删除的项目已从数据中删除，这是应该的，并且已删除事件将正确的项目标识为已删除，但在“val”中没有看到任何更改，因此没有更改发送到服务器。

代码：

<input id="id_tags" name="tags" type="text" value="Bugs, Existentialism, Kafkaesque" />    
$("#id_tags").select2({
        tokenSeparators:[","],
        placeholder: "Start typing your tags",
        createSearchChoice: function(term, data){
            if ($(data).filter(function(){
                return this.fields.name.localeCompare(term) === 0;
            }).length === 0) {
                return {
                    id: term,
                    fields: {"name": term}
                };
            }
        },
        multiple:true,
        ajax: {
            url: window.location.origin+'/tagsearch/',
            dataType: 'json',
            data: function( term, page ) {
                return {tag: term};
            },
            results: function (data, page) {
                return {results: data};
            }
        },
        formatResult: tagformat,
        formatSelection: tagformat,
        maximumSelectionSize: 20,
        formatSelectionTooBig: function(limit) {
            return "Stories are limited to " + limit + " tags.";
        },
        initSelection : function(element, callback){
            var data = [];
            $(element.val().split(",")).each(function () {
                data.push({id:this, fields:{name:this}});
            });
            callback(data);
        }
    });

$('#id_tags').on("select2-removed", function(e){
        var data = $("#id_tags").select2("data");
        console.log($('#id_tags').select2('val'));
        console.log("removed "+ e.choice.fields.name);
        console.log(data);
    });

【问题讨论】：

把这个放在一起？您是否使用 ajax 将删除标签添加到数据库表中？
Ajax 仅用于提取现有标签以供用户搜索。添加和删除标签是在服务器表单提交后完成的（没有 ajax），并且工作正常（没有 select2）。控制台登录remove功能似乎指向了JS的问题。
不确定如何运行 JS fiddle，因为 ajax 加载的数据在我的本地服务器上。 ajax返回的JSON格式都是{"id": xxx, "fields": {"name": tag_name}}

标签： javascript select jquery-select2

【解决方案1】：

尝试从输入元素的“值”属性中删除空格。

变化：

value="Bugs, Existentialism, Kafkaesque"

收件人：

value="Bugs,Existentialism,Kafkaesque"

或者，您可以在 initSelection 方法中修剪空间。

我知道空格不应该在那里——否则它们将成为 id 值的一部分——但我不确定它们为什么会导致值变得如此混乱。

jsfiddle 显示问题，jsfiddle 删除了空格。

【讨论】：

这解决了它。我在initSelection 中拆分了“，”而不是“，”并解决了。最好在那里解决，因为服务器默认值包括空格（Django）。非常感谢！
谢谢，伙计们！我在下面发布了@sybaritic 建议的解决方案。

【解决方案2】：

将initSelection内的.split(",")更改为.split(", ")：

initSelection : function(element, callback){
  var data = [];
  $(element.val().split(", ")).each(function () {
      data.push({id:this, fields:{name:this}});
  });
  callback(data);
}

【讨论】：