JS组件Bootstrap Select2使用方法详解

在介绍select组件的时候，之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章，这两个组件的功能确实很强大，本文分享下select组件的一些用法和特性。一些通用的单选、多选、分组等功能这里就不多做介绍了，multiselect这方面是强项。重点介绍下select2的一些特性效果：

一、特性效果

1、多选效果

可以设置最多只能选几个

2、图文结合的效果

3、远程搜索功能（即在用户输入搜索内容时动态去后台取数据）输入内容前

输入空格搜索出全部

滚动条滑动到底部自动加载剩余项

后台过滤

更高级的用法如：

其实使用起来也不难，就是一个拼html的过程。

二、代码示例

1、多选效果 select2的多选很简单，设置一个属性就好了。

　　<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;
};

3、远程搜索功能（即在用户输入搜索内容时动态去后台取数据）

$(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 = "

"+repo.name+"

";
return markup;
}

这里有要注意的一个地方就是processResults属性对应的方法有一个more属性用于是否分页显示的，这里的值要和你需要一次显示的值的条数匹配。

后台对应的方法如下：

lstProvince = new List() {"北京市","天津市","重庆市","上海市","河北省","山西省","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","台湾省","内蒙古自治区","广西壮族自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区" }; public JsonResult GetProvinces(string q,string page) { var lstRes = new List(); for (var i = 0; i < 30; i++) { var oProvince = new Province(); oProvince.id = i; oProvince.name = lstProvince[i]; lstRes.Add(oProvince); } if (!string.IsNullOrEmpty(q.Trim())) { lstRes = lstRes.Where(x => x.name.Contains(q)).ToList(); } var lstCurPageRes = string.IsNullOrEmpty(page) ? lstRes.Take(10) : lstRes.Skip(Convert.ToInt32(page) * 10 - 10).Take(10); return Json(new { items = lstCurPageRes,total_count = lstRes.Count },JsonRequestBehavior.AllowGet); }

上面说了这么多，那么我们在选中select2的选项之后如何取值和赋值呢？

1、获取选中的值

菜单图标",templateResult: oInit.formatState,templateSelection: oInit.formatState }); oMenuIcon.val();

2、设置select2的选中值

菜单图标",templateSelection: oInit.formatState }); oMenuIcon.val("CA").trigger("change");

如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：

以上就是关于select2的一些特性效果介绍，希望对大家的学习有所帮助。

原文链接：https://www.f2er.com/bootstrap/50370.html

JS组件Bootstrap Select2使用方法详解

一、特性效果

二、代码示例

猜你在找的Bootstrap相关文章