在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性。 一些通用的单选、多选、分组等功能这里就不多做介绍了,multiselect这方面是强项。重点介绍下select2的一些特性效果:
一、特性效果
1、多选效果可以设置最多只能选几个
2、图文结合的效果
3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前
输入空格搜索出全部
后台过滤
更高级的用法如:
其实使用起来也不难,就是一个拼html的过程。
二、代码示例
1、多选效果 select2的多选很简单,设置一个属性就好了。<script src="~/Content/select2-master/dist/js/select2.js">
<select id="sel_menu2" multiple="multiple" class="form-control">
<optgroup label="系统设置">
<option value="1">用户管理
<option value="2">角色管理
<option value="3">部门管理
<option value="4">菜单管理
//多选
$("#sel_menu2").select2({
tags: true,maximumSelectionLength: 3 //最多能够选择的个数
});
2、图文结合的效果
$(function () {
//带图片
$("#sel_menu").select2({
templateResult: formatState,templateSelection: formatState
});
});
function formatState(state) {
if (!state.id) { return state.text; }
var $state = $(
' ' + state.text + ''
);
return $state;
};
$(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 = "
return markup;
}
这里有要注意的一个地方就是processResults属性对应的方法有一个more属性用于是否分页显示的,这里的值要和你需要一次显示的值的条数匹配。
上面说了这么多,那么我们在选中select2的选项之后如何取值和赋值呢?
1、获取选中的值
2、设置select2的选中值
如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:
以上就是关于select2的一些特性效果介绍,希望对大家的学习有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。