引入
css
<link rel="stylesheet" href="/static/lib/select2/dist/css/select2.css">
js
<script src="/static/lib/select2/dist/js/select2.min.js"></script>
<script src="/static/lib/select2/dist/js/i18n/zh-CN.js"></script>
html
只需要一个select元素即可
<select id="select2" name="column_id[]" multiple></select>
使用
如果是要在模态框中使用需要监听模态框加载完毕后再初始化插件
以及插件基本上的使用选项都展示在下面了。
//模态框展示完毕
$(\'#myModal\').on(\'show.bs.modal\', function (e) {
$(\'#select2\').select2({
//主题，如果是用bootstrap的话建议用官方的bootstrap主题，
//如果你使用bootstrap4的主题，官网的https://github.com/ttskch/select2-bootstrap4-theme
//bootstrap3:网友维护 https://github.com/select2/select2-bootstrap-theme 可能还不如自带的好看
//default classic
theme: "classic",
//父容器,如果你是在模态框中使用需要指定这个(bootstrap)
dropdownParent: $(\'#modal-body1\'),
language: \'zh-CN\',
//弹出的检索框的宽度
width: \'100%\',
//默认提示
placeholder: \'请选择\',
//至少输入几个字符才开始检索
// minimumInputLength: 1,
//可否手动删除
allowClear: true,
//是否多选
multiple: true,
//最多只能选择3个项目
maximumSelectionLength: 3,
//通过ajax请求来获取数据
ajax: {
url: \'<{url(\'/article/search/column\')}>\',
dataType: \'json\',
delay: 500,// 延迟显示
data: function (params) {
return {
// 搜索框内输入的内容
keyword: params.term,
// 第几页
page: params.page || 1,
};
},
// 返回结果预处理为select2需要的固定格式
// processResults : function(data, params) {
// params.page = params.page || 1;
//
// return {
// // 后台返回的数据集
// results : data.data,
// pagination : {
// // 总页数为10，那么1-9页的时候都可以下拉刷新
// more : params.page < data.total
// }
// };
// },
//设置为false的话，那么每次请求都会携带一个随机时间戳格式参数
cache: true
},
// 让template的html显示效果，否则输出代码
escapeMarkup: function (markup) {
return markup;
},
// 搜索结果样式自定义
// templateResult: function (option) {
// if (option.loading) return option;
//
//
// var markup = \'<div> <p class="text-primary">学科名称：\' + option.text + \'</p>\';
// markup += \' </div>\';
// return markup;
// },
// 点击option后显示在输入框中的文本自定义
// templateSelection: function (option) {
// return option.name || option.text;
// }
});
})
接口返回数据格式
select2插件要求的格式，可以完全通过服务端来做，也可以通过插件提供的方法进行格式化
{
"results": [
{
"id": 1,
"text": "Option 1"
},
{
"id": 2,
"text": "Option 2"
}
],
"pagination": {
"more": true
}
}
解释一波，more 如果为true则select2插件下拉框拉到底部则会继续发生请求。
完全由服务端返回格式
这里是thinkphp6，如果你是用的tp6可以直接复制过去使用
public function search(Request $request)
{
//接收当前页码
$page = $request->get(\'page\');
//接收搜索的关键词
$kwd = $request->get(\'keyword\');
//select2插件需要返回的格式
$ret_format = [
\'results\' => [
// [
// \'id\' => 1,
// \'text\' => \'王二小\',
//
// ],
// [
// \'id\' => 2,
// \'text\' => \'option2\',
// "selected" => true
// ],
// [
// \'id\' => 3,
// \'text\' => \'option3\',
// "disabled" => true
// ],
],
\'pagination\' => [
\'more\' => false
]
];
//每页多少条
$pageSize = $this->pagesize;
//查询对象
$query = Column::where(\'user_id\', $this->user_id)
->when($kwd, function ($query) use ($kwd) {
$query->where(\'name\', \'like\', "%{$kwd}%");
});
//总记录条数
$count = $query->count();
//如果没有数据就直接返回
if ($count == 0) {
return json($ret_format);
}
//计算总页码数量
$countPages = ceil($count / $pageSize);
//是否可以继续请求下一页(当前页<总页数 说明可以继续请求下一页)
$paginationMore = $page < $countPages;
//查询
$columns = $query->page((int)$page, $pageSize)->select();
foreach ($columns as $column) {
$temp = [];
$temp[\'id\'] = $column->id;
$temp[\'text\'] = $column->name;
$ret_format[\'results\'][] = $temp;
$ret_format[\'pagination\'][\'more\'] = $paginationMore;
}
return json($ret_format);
}
默认样式有点丑陋，官方提供支持最新的主题bootstrap支持到v4，样式就特别好看了。
前端处理方式
如果是前端程序员不能修改后端格式，可以通过插件自行格式化...这里以后有用到再去找教程
数据回显
多选和单选同理
模板语法直接在页面上遍历回显
注意：多选的情况下 select 一定要添加 multiple属性 以及option 选项要添加 selected
<select id="select2" name="column_id[]" multiple>
<{foreach $article->columns as $column}>
<option value="<{$column->id}>" selected><{$column->name}></option>
<{/foreach}>
</select>
js回显
var hrew = [{id: 15, name: \'分类名称1\'},{id: 16, name: \'分类名称2\'}];
$.each(hrew, function (index, value) {
$(\'#select2\').append(new Option(value.name, value.id, false, true));
});
$(\'#select2\').trigger("change");
封装成一个方法
//select2 插件回显
function echoSelect2(dom, value) {
$.each(value, function (index, value) {
$(dom).append(new Option(value.name, value.id, false, true));
});
$(dom).trigger("change");
}
使用
let data = [{id: 1, name: \'分类1\'},{id: 2, name: \'分类2\'}];
echoSelect2("#select2", data);
结语
这个插件很强大也很好用。类似的插件也还有一个，如果你是使用的bootstrap的，那么推荐使用bootstrap-select