最近我在为一个客户在写需求的项目,遇到需要使用 select2 的效果插件,由于有段时间没有接触前端部分的开发感觉有点硬了,不过还好凭借有着扎实的前端功底的我来说不算什么难事,把玩几下基本上没有问题。这次是将 select2 使用中几个着重点记录下来。
select2 在 JQuery 和 AngularJS 中均可使用,而我这里使用的是 JQuery,首先是要引入必要的依赖的核心文件
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="//cdn.bootcss.com/select2/4.0.3/css/select2.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <!--<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>--> <script src="//cdn.bootcss.com/select2/4.0.3/js/select2.full.min.js"></script> <script src="//cdn.bootcss.com/select2/4.0.3/js/i18n/zh-CN.js"></script>
JQuery 使用 1.8.3 或者 2.1.0 的版本,我测试过者是可以的。接下来是2个示范的例子供参考。
范例一、本地数据方式
HTML:
<div> <h3>本地数据方式</h3> <select class="form-control input-sm local"> <option></option> </select> <p class="p1"></p> <hr> <button type="button" class="btn btn-sm btn-primary" id="one">click</button> </div>
JS:
$(".local").select2({ data: data, language: 'zh-CN', placeholder: '请选择', templateResult: function (repo) { return repo.text; }, templateSelection: function (repo) { return repo.text; }, // 多选 // multiple: true, allowClear:true }); $('#one').click(function(){ var id = $(".local").select2("data")[0].id; var text = $(".local").select2("data")[0].text; var html = '您选择了:' + '{ id:' + id + ', ' + 'text: ' + text + ' }'; $('.p1').text(html); });
范例二、AJAX的JSON数据方式
HTML:
<div class="col-sm-4"> <h3>AJAX获取数据方式</h3> <select class="form-control input-sm ajax"> <option></option> </select> <p class="p2"></p> <hr> <button type="button" class="btn btn-sm btn-primary" id="two">click</button> </div>
JS:
$(".ajax").select2({ ajax: { type:'GET', url: "/index.php?m=content&c=keyword&a=ajax", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, // search term 请求参数 page: params.page }; }, processResults: function (data, params) { params.page = params.page || 1; /*var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候,可以使用类似此方法创建新的数组对象 var arr = data.result.list for(item in arr){ itemList.push({id: item, text: arr[item]}) }*/ return { results: data.items,//itemList pagination: { more: (params.page * 30) < data.total_count } }; }, cache: true }, placeholder:'请选择',//默认文字提示 language: "zh-CN", tags: true,//允许手动添加 allowClear: true,//允许清空 escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入 minimumInputLength: 1, formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果 formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择 }); $('#two').click(function(){ var id = $(".ajax").select2("data")[0].id; var text = $(".ajax").select2("data")[0].text; var html = '您选择了:' + '{ id:' + id + ', ' + 'text: ' + text + ' }'; $('.p2').text(html); })
总结:范例一中的用于显示的载体控件可以是 select,也可以是 input,而在范例二中只能是 select
转载请注明:隨習筆記 » select2使用技巧