轻松使用jQuery双向select控件Bootstrap Dual Listbox

前端之家收集整理的这篇文章主要介绍了轻松使用jQuery双向select控件Bootstrap Dual Listbox前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文主要为大家介绍了双向select控件Bootstrap Dual ListBox的使用方法,Bootstrap Dual列表是一个为响应Twitter优化的列表框插件,它可以用在所有的现代浏览器和触摸设备上,分享给大家,具体如下:

效果图:

一、使用

1、引用css和js文件

2、初始化class属性为demo1的select元素

Box({ nonSelectedListLabel: 'Non-selected',selectedListLabel: 'Selected',preserveSelectionOnMove: 'moved',moveOnSelect: false,nonSelectedFilter: 'ion ([7-9]|[1][0-2])' });

$("#showValue").click(function () {
alert($('[name="duallistBox_demo1"]').val());
});
});

3、HTML代码

Box_demo1" class="demo1">

这样就完成了插件调用

二、扩展

一个通用的、初始化数据的js函数

Box*/ //queryParam1:参数 //selectClass:select元素class属性 //selectedDataStr:选中数据,多个以,隔开 function initListBox(queryParam1,selectClass,selectedDataStr) { var paramData = { 'testParam1': queryParam1 } $.ajax({ url: 'DataHandler.ashx',type: 'get',data: paramData,async: true,success: function (returnData) { var objs = $.parseJSON(returnData); $(objs).each(function () { var o = document.createElement("option"); o.value = this['id']; o.text = this['name']; if ("undefined" != typeof (selectedDataStr) && selectedDataStr != "") { var selectedDataArray = selectedDataStr.split(','); $.each(selectedDataArray,function (i,val) { if (o.value == val) { o.selected = 'selected'; return false; } }); } $("." + selectClass + "")[0].options.add(o); }); //渲染dualListBox $('.' + selectClass + '').bootstrapDualListBox({ nonSelectedListLabel: 'Non-selected',moveOnSelect: false//,//nonSelectedFilter: 'ion ([7-9]|[1][0-2])' }); },error: function (e) { alert(e.msg); } }); }

HTML代码

Box_demo2" class="demo2">

调用

Box('hangwei.cnblogs.com','demo2');

$("#showValue").click(function () {
alert($('[name="duallistBox_demo2"]').val());
});
});

DataHandler.ashx代码

using System;
using System.Web;
using System.Collections.Generic;
using Newtonsoft.Json;

public class DataHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {
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 List();
list.Add(china);
list.Add(usa);
list.Add(rsa);
list.Add(en);
list.Add(fra);
string returnJson = JsonConvert.SerializeObject(list);
context.Response.ContentType = "text/plain";
context.Response.Write(returnJson);
}

public bool IsReusable {
get {
return false;
}
}

}

效果

本文的demo使用的开发环境:VS2013、.NET Framework4.5.

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

以上就是双向select控件Bootstrap Dual ListBox的使用方法,希望对大家的学习有所帮助。

猜你在找的jQuery相关文章