轻松使用jQuery双向挑选控件引导双列表框

本文主要为大家介绍了双向挑选控件引导双列表框的使用方法双自举列表是一个为响应推特优化的列表框插件，它可以用在所有的现代浏览器和触摸设备上，分享给大家，具体如下：

效果图：

一、使用

1、引用钢性铸铁和射流研究…文件

link href=' scripts/bootstrap-3。3 .5-dist/CSS/引导。量滴CSS ' rel='样式表'/!-link href='//cdnjs。cloudflare。com/Ajax/libs/pretify/r298/pretify。量滴CSS ' rel='样式表-link href=' scripts/dual listbox/bootstrap-dual listbox。量滴CSS ' rel='样式表'/脚本src=' http : scripts/jquery/jquery-2。1 .4 .量滴js /脚本脚本src=' http 3360脚本/引导-3。3 .5-dist/js/js-script src=' http://cdnjs。cloudflare。com/Ajax/libs/pretify/r298/run _ pretify。量滴js '/script-script src=' http : script/dual listbox/jquery。bootstrap-双重列表框。量滴js '/脚本2，初始化班级属性为demo1的挑选元素

脚本类型=' text/JavaScript ' $(function(){ var demo 2=$(。演示1 ').bootstrapdallistbox({ nonselectedlistbale : '未选择，selectedlistbale : '已选择，保留选择移动： '已移动，moveOnSelect: false，未选择的筛选器： ' ion([7-9]|[1][0-2]))' })；$('#showValue ').单击(function(){ alert($('[name=' dual listbox _ demo 1 ']').val())；});});/script3、html代码

div class=' col-MD-7 ' select multiple=' multiple ' size=' 10 ' name=' dual listbox _ demo 1 ' class=' demo 1 '选项值=' 1 '选项1/选项值=' 2 '选项2/选项值=' 3 '已选择='已选择'选项3/选项值=' 4 '选项4/选项值=' 5 '选项5/选项值=' 6 '已选择='已选择'选项6/选项值=' 7 '选项7/选项值='8 '选项8/选项这样就完成了插件的调用

二、扩展

一个通用的、初始化数据的射流研究…函数：

/*初始化duallistbox*///queryParam1:参数//选择类：选择元素班级属性//selectedDataStr:选中数据，多个以，隔开函数initListBox(queryParam1，selectClass，selectedDataStr){ var param data={ ' testparam 1 ' :查询参数1 } $ .Ajax({ URL : ' DataHandler。ashx '，type: 'get '，data: paramData，async: true，success :函数(返回数据){ var objs=$ .parseJSON(返回数据)；$(objs).每个(函数(){ var o=document。create element(' option ')；o . value=this[' id ']；o . text=this[' name ']；if ('undefined '！=类型为(selectedDataStr)selectedDataStr！=' '){ var selectedDataArray=selecteddatastr。split('，')；$.每个(selectedDataArray，function (i，val){ if(o . value==val){ o . selected=' selected '；返回false } })；} $('.'选择CLaSS ' ')[0]。选项。添加(o)；});//渲染双重列表框$(".")选择类别' ').bootstrapdallistbox({ nonselectedlistbale : '未选择，selectedlistbale : '已选择，保留选择移动： '已移动，moveonselecte 3360 false/，//未选择的筛选器： ' ion([7-9]|[1][0-2]))' })；}，错误：函数{警报(如味精)；} });}html代码：

div class=' col-MD-7 ' select multiple=' multiple ' size=' 10 ' name=' dual listbox _ demo 2 ' class=' demo 2 '/select br/input id=' show value ' type=' button ' value=' show selected data '/div调用：

$(function () { //初始化initListBox(' hangwei。cn博客。com '，' demo 2 ')；$('#showValue ').单击(function(){ alert($('[name=' dual listbox _ demo 2 ']').val())；});});DataHandler.ashx代码：

"%@"网络处理程序语言="c# "类="使用系统的数据处理程序";使用系统网络.使用系统。集合。通用；使用牛顿英尺.Json公共类DataHandler : IHttpHandler { public void process request(HttpContext)上下文){ var china=new { id='China '，name='中国' };var usa=new { id='USA '，name='美国' };var rsa=new { id='Russia '，name='俄罗斯' };var en=new { id='English '，name='英国' };var fra=new { id='France '，name='法国' };list对象list=new Listobject()；名单。添加（中国);名单添加(美国);名单. add(RSA)；名单添加(en)；名单add(fra)；string returnJson=JsonConvert .SerializeObject(列表);语境。响应。内容类型='文本/纯文本；语境回应。write(returnJson)；} public bool IsReuse { get { return false；} }}效果：

本文的演示使用的开发环境：VS2013、 NET Framework4.5

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：引导学习教程引导程序实战教程

以上就是双向挑选控件引导双列表框的使用方法，希望对大家的学习有所帮助。