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>
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=" 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>