JS组件自举选择2使用方法详解

在介绍挑选组件的时候，之前分享过一篇射流研究…组件中自举多选两大组件较量的文章，这两个组件的功能确实很强大，本文分享下挑选组件的一些用法和特性。一些通用的单选、多选、分组等功能这里就不多做介绍了，多选这方面是强项。重点介绍下选择2的一些特性效果：一、特性效果1、多选效果

可以设置最多只能选几个

2、图文结合的效果

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

输入空格搜索出全部

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

输入文本动态去后台过滤

更高级的用法如：

其实使用起来也不难，就是一个拼超文本标记语言的过程。

二、代码示例1、多选效果选择2的多选很简单，设置一个属性就好了。

脚本src=' http : ~/Scripts/jquery-1。10 .2 .js /脚本脚本src=' http : ~/Content/bootstrap/js/bootstrap。js /脚本链接href=' ~/Content/bootstrap/CSS。CSS ' rel='样式表'/脚本src=' http : ~/Content/select 2-master/dist/js/select 2。js /脚本链接href='~/Content/select2系统设置选项值='1 '用户管理/option选项值='2 '角色管理/option选项值='3 '部门管理/option选项值='4 '菜单管理/option /optgroup optgroup标签='订单管理选项值='5 '订单查询/option选项值='6 '订单导入/option选项值='7 '订单删除/option选项值='8 '订单撤销/option /optgroup optgroup标签='基础数据选项值='9 '基础数据维护/option /optgroup /select //多选$(' # sel _ menu 2 ')。选择2({ tags : true，maximumSelectionLength: 3 //最多能够选择的个数});2、图文结合的效果

select id=' sel _ menu ' class=' js-example-templating js-States form-control ' opt group label='系统设置选项值='1 '用户管理/option选项值='2 '角色管理/option选项值='3 '部门管理/option选项值='4 '菜单管理/option /optgroup optgroup标签='订单管理选项值='5 '订单查询/option选项值='6 '订单导入/option选项值='7 '订单删除/option选项值='8 '订单撤销/option /optgroup optgroup标签='基础数据选项值='9 '基础数据维护/option/opt group/select $(function(){//带图片$(' # sel _ menu ')。选择2({模板结果：格式状态，模板选择：格式状态})；});函数formatState(state) { if(！国家。id){返回状态。文本；} var $ state=$(' span mg src=' http :/content/images/' state。元素。价值。tolowercase()).ico ' class=' img-flag '/state。文本'/span ')；返回$ state }；3、远程搜索功能（即在用户输入搜索内容时动态去后台取数据)

select id=' sel _ menu 3 ' class=' js-data-example-Ajax表单-控件'选项值='3620194 '选中='选中'请选择/option /select$(function () { //远程筛选$(' # sel _ menu 3 ')。选择2({ Ajax : { URL : '/Home/GetProcess '，dataType: 'json '，delay: 250，data :函数(params){ return { q : params。术语，//搜索术语页面：参数。页面}；}，processResults:函数（数据，参数){ params。page=params。页面| | 1；返回{结果： data.items，分页： {更多：(参数。第* 10页)数据。total _ count } }}，cache: true }，擒纵标记：函数（标记){返回标记；},//让我们的自定义格式化程序工作minimumInputLength: 1，模板结果：格式回购省份，//省略为简洁起见，参见本页的来源模板选择：格式回购省份//省略为简洁起见，参见本页的来源});});函数格式化回购省(回购){ if(回购。装载)返回repo.textvar标记=' div ' repo。name/' div '；返回标记；}这里有要注意的一个地方就是过程结果属性对应的方法有一个更多属性用于是否分页显示的，这里的值要和你需要一次显示的值的条数匹配。

后台对应的方法如下：

public Liststring lst savage=new Liststring(){ '北京市','天津市','重庆市','上海市','河北省','山西省','辽宁省','吉林省','黑龙江省','江苏省','浙江省','安徽省','福建省','江西省','山东省','河南省','湖北省','湖南省','广东省','海南省','四川省','贵州省','云南省','陕西省','甘肃省','青海省','台湾省','内蒙古自治区','广西壮族自治区','西藏自治区','宁夏回族自治区','新疆维吾尔自治区','香港特别行政区','澳门特别行政区' };公共JsonResult省份(字符串q，字符串page){ var lstRes=new listvusure()；for(var I=0；i 30I){ var oprovens=新省();奥洛文斯。id=I；奥洛文斯。名字=lst savage[I]；lstRes .添加(oprop Vince)；} if(！字符串IsNullOrEmpty(q . Trim())){ lstRes=lstRes .其中(x=x.name.Contains(q)).to list()；} var lstCurPageRes=string .IsNullOrEmpty(第页)?lstRes .走(10) :号高速公路。跳过（转换。至32(第* 10 - 10页)。取(10);返回JSON(new { items=lstcurpagers，total_count=lstRes .Count }，JsonRequestBehavior .允许get)；}上面说了这么多，那么我们在选中选择2的选项之后如何取值和赋值呢？

1、获取选中的值

var oMenuIcon=$(' # txt _ menuicon _ web ')。选择2({占位符： '请选择菜单图标，模板结果： oinit。格式状态，模板选择： oinit。格式状态})；omenuicon。val()；2、设置选择2的选中值

var oMenuIcon=$(' # txt _ menuicon _ web ')。选择2({占位符： '请选择菜单图标，模板结果： oinit。格式状态，模板选择： oinit。格式状态})；oMenuIcon.val('CA ').触发器('更改');如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：引导学习教程引导程序实战教程引导程序插件使用教程

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