Select2：使用代码动态添加新标签答案

【问题标题】：Select2: add new tag dynamically using codeSelect2：使用代码动态添加新标签
【发布时间】：2015-01-08 15:55:41
【问题描述】：

我正在使用 select2 进行标记，并且我对其进行了设置，以便用户也可以添加新标记。我正在处理的问题是验证用户条目并将经过清理的标签添加到选择中。

更具体地说，当用户在标签中输入空格时，我使用 formatNoMatches 显示 js 链接来清理标签，然后以编程方式添加标签。这段代码似乎运行没有错误，但是当调用 sanitize 时，所有输入的选择都会被清除。

任何线索我可能会出错？

var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}];
function format(item) { return item.tag; }

function sanitize(a){

    $("#select").select2('val',[{
        id: -1,
        tag: a
      }]);

      console.log(a);
};

$("#select").select2({
  tags: true,
  // tokenSeparators: [",", " "],
  createSearchChoice: function(term, data) {
    return term.indexOf(' ') >= 0 ?  null :
    {
        id: term,
        tag: term
      };
  },
  multiple: true,
  data:{ results: data, text: function(item) { return item.tag; } },  formatSelection: format, formatResult: format,
  formatNoMatches: function(term) { return "\"" + term + "\" <b>Is Invalid.</b> <a onclick=\"sanitize('"+ term +"')\">Clear Invalid Charecters</a>" }
});

【问题讨论】：

有没有人想出如何在 select2 4.0.x 中做到这一点？

标签： javascript jquery-select2

【解决方案1】：

只有这个解决方案对我有用：

function convertObjectToSelectOptions(obj){
    var htmlTags = '';
    for (var tag in obj){
        htmlTags += '<option value="'+tag+'" selected="selected">'+obj[tag]+'</option>';
    }
    return htmlTags;
}
var tags = {'1':'dynamic tag 1', '2':'dynamic tag 2'}; //merge with old if you need
$('#my-select2').html(convertObjectToSelectOptions(tags)).trigger('change');

【讨论】：

【解决方案2】：

在对其进行了更多修改后，我意识到我应该将新项目设置为“数据”属性而不是值。

var newList = $.merge( $('#select').select2('data'), [{
        id: -1,
        tag: a
      }]);
$("#select").select2('data', newList)

【讨论】：

【解决方案3】：

您可以设置新值（如果标签可以传递数组）并触发“更改”事件。

var field = $('SOME_SELECTOR');

field.val(['a1', 'a2', 'a3']) // maybe you need merge here
field.trigger('change')

关于活动：https://select2.github.io/options.html#events

【讨论】：