转载

Jquery双向select控件Bootstrap Dual Listbox

效果预览：

一. 下载插件

github地址： https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox

也可以在这个网站中下载： http://www.virtuosoft.eu/code/bootstrap-duallistbox/ (排版很好，推荐做为API参考地址)

二. 使用

引用css和js文件：

     <link href="scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />     <!--<link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet">-->     <link href="scripts/duallistbox/bootstrap-duallistbox.min.css" rel="stylesheet" />     <script src="scripts/jquery/jquery-2.1.4.min.js"></script>     <script src="scripts/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>     <!--<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>-->     <script src="scripts/duallistbox/jquery.bootstrap-duallistbox.min.js"></script>

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

     <script type="text/javascript">         $(function () {             var demo2 = $('.demo1').bootstrapDualListbox({                 nonSelectedListLabel: 'Non-selected',                 selectedListLabel: 'Selected',                 preserveSelectionOnMove: 'moved',                 moveOnSelect: false,                 nonSelectedFilter: 'ion ([7-9]|[1][0-2])'             });              $("#showValue").click(function () {                 alert($('[name="duallistbox_demo1"]').val());             });         });     </script>

HTML代码：

      <div class="col-md-7">         <select multiple="multiple" size="10" name="duallistbox_demo1" class="demo1">             <option value="1">Option 1</option>             <option value="2">Option 2</option>             <option value="3" selected="selected">Option 3</option>             <option value="4">Option 4</option>             <option value="5">Option 5</option>             <option value="6" selected="selected">Option 6</option>             <option value="7">Option 7</option>             <option value="8">Option 8</option>             <option value="9">Option 9</option>             <option value="10">Option 10</option>         </select>         <br />         <input id="showValue" type="button" value="show selected data" />     </div>

这样就完成了插件的调用。

三. 扩展

一个通用的，初始化数据的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代码：

     <div class="col-md-7">         <select multiple="multiple" size="10" name="duallistbox_demo2" class="demo2">         </select>         <br />         <input id="showValue" type="button" value="show selected data" />     </div>

调用：

         $(function () {             //初始化             initListBox('hangwei.cnblogs.com', 'demo2');              $("#showValue").click(function () {                 alert($('[name="duallistbox_demo2"]').val());             });         });

DataHandler.ashx代码：

  <%@ 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<object> list = new List<object>();         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;         }     }  }  View Code

效果：

Jquery双向select控件Bootstrap Dual Listbox