select2插件的使用及方法整合

select2的使用

<select name="" id=""></select>

$('select').select2({
    data: data, //传入数组，格式为[{id:'aaa',text:'aaa'},{id:'bbb',text:'bbb'}]
    placeholder: '请选择', //提示
    multiple: true, //多选
    allowClear: true,
    theme: "classic",
    placeholderOption: "first",
    language: { //未搜索到,显示文字
        noResults: function (params) {
            return "暂无数据";
        }
    }
})

获取select2输入框中的值

var data=$('select').select2('data');

往select2输入框里传值

//传入的是一个数组，数组里是要选择那一项的id
$('select').val(['aaa']).trigger('change');

对选择的内容在输入框里按选择顺序排序

1、     //顶部插入
$('select').on("select2:select", function (e) { //当下拉框某一项被选择时触发
    var element = e.params.data.element;
    var $element = $(element); //被选择的那一项
    if ($('select').find(':selected').length > 1) {
        $element.detach();
        $('select').find(':selected:last').after($element);
    } else if ($('select').find(':selected').length == 1) {
        $(this).prepend($element);
        $(this).trigger("change");
    }
})
2、     //尾部插入
$('select').on("select2:select", function (e) { //当下拉框某一项被选择时触发
    var element = e.params.data.element;
    var $element = $(element); //被选择的那一项
    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
})

选中某一项时触发

$('select').on("select2:select", function (e) { //当下拉框某一项被选择时触发
    var element = e.params.data.element;
    var $element = $(element); //选中的那一项
})

删除某一项时触发

$('select').on("select2:unselect", function (e) {
    var element = e.params.data.element;
    var $element = $(element); //被删除的那一项
})

输入框中值改变时触发

$('select').on('change',function(e){

})

被选中项不在下拉框中出现 css设置如下

.select2-results__option[aria-selected=true] {
    display: none;
}