网站与网页区别,深圳网络市场推广,网站性能优化,大连牛人网络推广有限公司在介绍select组件的时候#xff0c;之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章#xff0c;这两个组件的功能确实很强大#xff0c;本文分享下select组件的一些用法和特性。一些通用的单选、多选、分组等功能这里就不多做介绍了#xff0c;multiselect…在介绍select组件的时候之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章这两个组件的功能确实很强大本文分享下select组件的一些用法和特性。一些通用的单选、多选、分组等功能这里就不多做介绍了multiselect这方面是强项。重点介绍下select2的一些特性效果一、特性效果1、多选效果可以设置最多只能选几个2、图文结合的效果3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)输入内容前输入空格搜索出全部滚动条滑动到底部自动加载剩余项输入文本动态去后台过滤更高级的用法如其实使用起来也不难就是一个拼html的过程。二、代码示例1、多选效果select2的多选很简单设置一个属性就好了。用户管理角色管理部门管理菜单管理订单查询订单导入订单删除订单撤销基础数据维护//多选$(#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 termpage: 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 workminimumInputLength: 1,templateResult: formatRepoProvince, // omitted for brevity, see the source of this pagetemplateSelection: 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属性用于是否分页显示的这里的值要和你需要一次显示的值的条数匹配。后台对应的方法如下public List 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、获取选中的值var oMenuIcon $(#txt_menuicon_web).select2({placeholder: 请选择菜单图标,templateResult: oInit.formatState,templateSelection: oInit.formatState});oMenuIcon.val();2、设置select2的选中值var oMenuIcon $(#txt_menuicon_web).select2({placeholder: 请选择菜单图标,templateResult: oInit.formatState,templateSelection: oInit.formatState});oMenuIcon.val(CA).trigger(change);以上就是关于select2的一些特性效果介绍希望对大家的学习有所帮助。
