本文主要为大家介绍了双向select控件Bootstrap Dual Listbox的使用方法，Bootstrap Dual列表是一个为响应Twitter优化的列表框插件，它可以用在所有的现代浏览器和触摸设备上，分享给大家，具体如下：
效果图：
一、使用
1、引用css和js文件
2、初始化class属性为demo1的select元素
3、html代码
Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8 Option 9 Option 10
这样就完成了插件的调用
二、扩展
一个通用的、初始化数据的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', selectedListLabel: 'Selected', preserveSelectionOnMove: 'moved', moveOnSelect: false//, //nonSelectedFilter: 'ion ([7-9]|[1][0-2])' }); }, error: function (e) { alert(e.msg); } }); } html代码：
调用：
$(function () { //初始化 initListBox('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
