select2自定义标签 + 按钮

 需求：如图一所示，点击按钮时，下面的下拉框添加一个标签，当下面有该标签时，再点击消失。下拉框还能输入自定义标签，但要求只有一个自定义标签。

 首先，支持添加自定义标签

var option={tags:true}

 当然创建默认是enter键

也可自行设置支持逗号与空格

var option={tokenSeparators ：[ '，' ，'' ]}

 要求只有一个自定义标签，那就需要知道创建标签的事件，而后进行限制

$('select').select2({
  createTag: function (params) {
    // Don't offset to create a tag if there is no @ symbol
    if (params.term.indexOf('@') === -1) {
      // Return null to disable tag creation
      return null;
    }

    return {
      id: params.term,
      text: params.term
    }
  }
});

然而后来发现你自定义输入123时，这个事件会触发三次，也就是，还没创建成功，在创建过程中都会触发，所以我自行加入判断的代码，在自定义输入时，删除原来的自定义标签。大致代码如下：

 $('#addArea').click(function(){
            addTag({name:'区域',value:'area'});
            refresh();
        });

var option ={
            // maximumSelectionLength:5,
            tags: true,
            allowClear:true,
            createTag: function (params) {
                var term = $.trim(params.term);
                if (term === '') {
                    return null;
                }
                for(var i=0;i<$('#selTag')[0].options.length;i++){
                    var temp = $('#selTag')[0].options[i].value;
                    if(temp != "area"
                        && temp != "equip"
                         && temp != "eventType"
                        && temp != "deviceCheckPoint"){
                        $('#selTag')[0].remove(i);
                    }
                }
                return {
                    id:"triggerValue",
                    text: term,
                }

            }

function refresh(){
        var values = [];
        $('#selTag option').each(function(){
            values.push($(this).val());
        });
        $('#selTag').select2(option).val(values).trigger('change');
    }

function addTag(tag){
            var flag = false;
            for (var i = 0; i < tagArray.length; i++) {
                if (tagArray[i] == tag.value) {
                    tagArray.remove(tag.value);
                    flag = true;
                    for(var i=0;i<$('#selTag')[0].options.length;i++){
                        if($('#selTag')[0].options[i].text == tag.name){
                            $('#selTag')[0].options.remove(i);
                            break;
                        }
                    }
                    break;
                }
            }
            if (flag == false) {
                tagArray.add(tag.value);
                $('#selTag').append('<option value="' + tag.value + '" data-select2-tag="true">' + tag.name + '</option>');
            }
            refresh();
        }