Question

我正在使用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);
    });

Answer 1

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

变化：

value="Bugs, Existentialism, Kafkaesque"

要：

value="Bugs,Existentialism,Kafkaesque"

或者，您可以使用initSelection方法缩小空格。

我知道空格不应该存在 - 否则它们会成为id值的一部分 - 但是我不确定它们为什么会导致价值变得混乱。

以下是显示问题的jsfiddle，以及删除了空格的jsfiddle。

Answer 2

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

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

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

2 个答案: