最近我在为一个客户在写需求的项目，遇到需要使用 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使用技巧