Select2是一款基于JQuery的下拉列表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等功能。
下载
准备
使用
普通使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="select2.min.css">
</head>
<body>
<select name="name">
<option value="1">1</option>
<option value="2" selected>2</option>
</select>
<script src="jquery-3.5.1.min.js"></script>
<script src="select2.min.js"></script>
<script>
$(function() {
$('select').select2();
});
</script>
</body>
</html>
123456789101112131415161718192021222324
提示
$('select').select2({
placeholder: '请选择'
});123
加载本地数据
需要两个数据属性id和text
var data = [
{id: 1, text: '1'}
];
$('select').select2({
data: data
});123456
加载远程数据
$('select').select2({
ajax: {
url: 'tags',
data: function (params) {
return {
keywords: params.term, // keywords为发送到服务端的参数名，params.term表示输入框中输入的内容
page: params.page || 1
};
},
processResults: function (data) {
data = data.data;
return {
results: data.data.map(item => {
return {
id: item.id,
text: item.name,
}
}),
pagination: {
// 是否还有下一页
more: data.paging.more
}
};
}
}
});1234567891011121314151617181920212223242526
设置默认选中
<select name="name[]" multiple>
<option value="1" selected>1</option>
<option value="2" selected>2</option>
</select>1234
转载请保留原文链接： https://zodream.cn/blog/id/127.html