前端组件 -- select2用法小结

最新推荐文章于 2025-05-30 11:47:20 发布

原创最新推荐文章于 2025-05-30 11:47:20 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端组件常用方法

select2 使用方法总结：

常用属性查询：

http://select2.github.io/select2/

今天我们来总结下select2组件的一些日常用法：

1、ajax调用后台服务端+多标签显示：

$('.locales').select2({
                placeholder:'请输入xxx',
                multiple: true,
                allowClear: false,
                width: '100%',
                minimumInputLength: 1,
                ajax:{
                    type:'POST',
                    url: '/search/searchAdlocale',
                    dataType: 'json',
                    delay: 50,
                    data: function (query) {
                        return{
                            param:JSON.stringify({ // 查询的参数
                                type:"adlocale",
                                q: query.term,
                                locale: 'cn'
                            })
                        }
                    },
                    xhrFields: { //跨域
                        withCredentials: true
                    },
                    //配置返回数据格式
                    processResults: function (res, param) {
                        var opts = {
                            results: []
                        };
                        var data = res.data;
                        $(data).each(function(i, v) {
                            opts.results.push({
                                id : v.key,
                                text: v.name
                            })
                        });
                        return opts;
                    },
                    cache: false
                }
            }).on("select2:select", function(){
                。。。。。
            }).on("select2:unselect", function(){
                。。。。。
            });

2、ajax查询之后放到select2中的data属性中：

var datas = $.get('xxx.php');

$(".dom1Class").select2({
                        data: datas,
                        placeholder: '请输入xxx',
                        multiple: true,
                        allowClear: false,
                        width: '100%',
                        templateSelection : function(_customAudience){
                            return _customAudience.name  + '[' + (_customAudience.isClude == 1  || _customAudience.isClude == "1" ? I18N.getText('management', 'include') : I18N.getText('management', 'exclude'))+ ']';
                        }
                    })