版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/document_dom/article/details/88668616
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输入框里传值
$('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: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;
}