欢迎访问张朋的技术分享社区
当前位置: 首页 > 技术分享  > SDK

Select2下拉框总结

2018/3/30 13:29:19 人评论

一.文件需要引入select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用。比如:清除功能allowClear: true最新版本请使用<select></select>标签(对于本地化的数据你可以使…

一.文件需要引入select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上

最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用。比如:清除功能allowClear: true

最新版本请使用<select></select>标签(对于本地化的数据你可以使用input,但ajax远程数据必须使用select)

单选:<select id="area" class="select2" style="width:150px"></select>

多选:<select id="area" class="select2" style="width:150px" multiple></select>

二.placeholder

placeholder占位提示文字,如果需要清除功能,则必须设置placeholder。

三.加载本地数据

select2默认的数据属性是id、text,新版本可以自定义,但还是用默认的比较好。所以提供的json中最好转换为id、text形式,当然可以添加其他属性。

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

$("#area").select2({

  data: data,

  placeholder:'请选择',

  allowClear:true

})

function formatRepo(repo) { return repo.text }

function formatRepoSelection(repo) { return repo.text }

//页面加载完成后初始化select2控件

$("#area").select2({

    placeholder: "请至少选择一个单位",  

    language: "zh-CN",

    ajax: {

        type: 'POST',

        url: "/Info/GetCompanies",

        dataType: 'json',

        delay: 250,

        data: function (params) {

            return {

                CompanyName: params.term //CompanyName是自己命名的查询参数,params.term是输入的关键字并去接口获取数据列表用的

            };

        },

        processResults: function (data) {

            return {

                results: data.result //此处注意data和data.result的区别

            };

        },

        cache: true

    },

    escapeMarkup: function (markup) { return markup; }, 

    //minimumInputLength:1,//此处最好注释掉,防止默认初始化无数据

    //maximumSelectionLength:10

    templateResult: formatRepo,

    templateSelection: formatRepoSelection

})

获取选中值:$("#area").select2("data")[0].text/id //此处text,id等同于后台返回的text,id

templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里,当然你可以return repo.text+"1";等

关于返回的 json的格式:select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}],新版严格要求这样的格式,当然你可以添加列,如:[{id:1,text:'text',name:'liu'}]

     

附件下载

相关技术

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?