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

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

效果图：

一、使用

1、引用css和js文件

rush:css;">

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

rush:js;">

3、HTML代码

rush:xhtml;">

Box_demo1" class="demo1">

这样就完成了插件的调用

二、扩展

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

rush:js;"> /*初始化duallistBox*/ //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代码：

rush:xhtml;">

Box_demo2" class="demo2">

调用：

rush:js;"> $(function () { //初始化 initListBox('hangwei.cnblogs.com','demo2');

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

DataHandler.ashx代码：

rush:xhtml;"> <%@ WebHandler Language="C#" Class="DataHandler" %>

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