Question

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

Answer 1

在黑客攻击后，我意识到我应该将新项目设置为＆＃34;数据＆＃34;财产而非价值。

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

Answer 2

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

var field = $('SOME_SELECTOR');

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

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

Answer 3

只有这个解决方案适合我：

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');

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

3 个答案: