1.1 select2插件基本使用
1、下载select2插件
1. 下载地址：https://github.com/select2/select2
2、官网地址：https://select2.org/getting-started/basic-usage
3、文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上
2、使用原有的 option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<select class="js-example-basic-single" name="state">
<option value="2">tom</option>
<option value="18">naiqiang.xiao</option>
<option value="19">jian.yang</option>
</select> <link href="/static/select2/select2.css" rel="stylesheet" />
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/select2/select2.js"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
</body>
</html>
使用原有的 option
3、加载本地数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<select id="select"></select> <link href="/static/select2/select2.css" rel="stylesheet" />
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/select2/select2.js"></script>
<script>
var data = [
{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }
];
$("#select").select2({
data: data,
placeholder:'请选择',
allowClear:true
})
</script> </body>
</html>
加载本地数据
1.2 使用ajax加载远程数据
1、参数说明
1.q: params.term 查询参数（params.term表示输入框中内容，q发生到服务器的参数名；所以这里你可以添加自定义参数，如：stype:'person'）
2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）
3.minimumInputLength 最小需要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。
4.escapeMarkup 字符转义处理
5.templateResult 返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等
6.templateSelection 选中项回调function formatRepoSelection(repo){return repo.text}
7.关于返回的 json的格式：select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:'text',name:'liu'}]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
ul li{
width: 100px;
}
</style>
</head>
<body>
<select id="select" style="width: 400px"></select> <link href="/static/select2/select2.css" rel="stylesheet" />
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/select2/select2.js"></script>
<script>
$("#select").select2({
ajax: {
url: "/data/",
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term, // 这里是查询参数，当输入框的值改变时就会实时将此参数提交到后台
};
},
processResults: function(data) {
return {
results: data
};
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
},
// minimumInputLength: 10,
templateResult: formatRepo,
templateSelection: formatRepoSelection,
placeholder:'请选择',
allowClear:true
}); // 返回结果回调此函数 repo 是url中返回的数据, 可以在这里对返回数据进行过滤
function formatRepo(repo){
return repo.text
} // 选中选项时回调此函数
function formatRepoSelection(repo){
return repo.text
}
</script>
</body>
</html>
加载远程数据