在介绍select组件的时候，之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章，这两个组件的功能确实很强大，本文分享下select组件的一些用法和特性。
一些通用的单选、多选、分组等功能这里就不多做介绍了，multiselect这方面是强项。重点介绍下select2的一些特性效果：
一、特性效果
1、多选效果
可以设置最多只能选几个
2、图文结合的效果
3、远程搜索功能（即在用户输入搜索内容时动态去后台取数据）
输入内容前
输入空格搜索出全部
滚动条滑动到底部自动加载剩余项
输入文本动态去后台过滤
更高级的用法如：
其实使用起来也不难，就是一个拼html的过程。
二、代码示例
1、多选效果
select2的多选很简单，设置一个属性就好了。
<script src="https://www.jb51.net/~/Scripts/jquery-1.10.2.js"></script> <script src="https://www.jb51.net/~/Content/bootstrap/js/bootstrap.js"></script> <link href="https://www.jb51.net/~/Content/bootstrap/css/bootstrap.css" /> <script src="https://www.jb51.net/~/Content/select2-master/dist/js/select2.js"></script> <link href="https://www.jb51.net/~/Content/select2-master/dist/css/select2.css" /> <select multiple="multiple"> <optgroup label="系统设置"> <option value="1">用户管理</option> <option value="2">角色管理</option> <option value="3">部门管理</option> <option value="4">菜单管理</option> </optgroup> <optgroup label="订单管理"> <option value="5">订单查询</option> <option value="6">订单导入</option> <option value="7">订单删除</option> <option value="8">订单撤销</option> </optgroup> <optgroup label="基础数据"> <option value="9">基础数据维护</option> </optgroup> </select> //多选 $("#sel_menu2").select2({ tags: true, maximumSelectionLength: 3 //最多能够选择的个数 });
2、图文结合的效果
<select> <optgroup label="系统设置"> <option value="1">用户管理</option> <option value="2">角色管理</option> <option value="3">部门管理</option> <option value="4">菜单管理</option> </optgroup> <optgroup label="订单管理"> <option value="5">订单查询</option> <option value="6">订单导入</option> <option value="7">订单删除</option> <option value="8">订单撤销</option> </optgroup> <optgroup label="基础数据"> <option value="9">基础数据维护</option> </optgroup> </select> $(function () { //带图片 $("#sel_menu").select2({ templateResult: formatState, templateSelection: formatState }); }); function formatState(state) { if (!state.id) { return state.text; } var $state = $( '<span><img src="/content/images/' + state.element.value.toLowerCase() + '.ico" /> ' + state.text + '</span>' ); return $state; };
3、远程搜索功能（即在用户输入搜索内容时动态去后台取数据）
<select> <option value="3620194" selected="selected">请选择</option> </select> $(function () { //远程筛选 $("#sel_menu3").select2({ ajax: { url: "/Home/GetProvinces", 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; return { results: data.items, pagination: { more: (params.page * 10) < data.total_count } }; }, cache: true }, escapeMarkup: function (markup) { return markup; }, // let our custom formatter work minimumInputLength: 1, templateResult: formatRepoProvince, // omitted for brevity, see the source of this page templateSelection: formatRepoProvince // omitted for brevity, see the source of this page }); }); function formatRepoProvince(repo) { if (repo.loading) return repo.text; var markup = "<div>"+repo.name+"</div>"; return markup; }
这里有要注意的一个地方就是processResults属性对应的方法有一个more属性用于是否分页显示的，这里的值要和你需要一次显示的值的条数匹配。
后台对应的方法如下：