Easy to use jquery bidirectional Select control Bootstrap Dual listbox_jquery

This article mainly introduces the use of bidirectional Select control Bootstrap Dual ListBox, Bootstrap Dual list is a list box plug-in optimized for Twitter, it can be used in all modern browsers and touch devices to share to everyone, Specifically as follows:

Effect Chart:

First, use

1, referencing CSS and JS files

 <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>

2, the Select element that initializes the class attribute to Demo1

<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>

3, HTML code

<div class= "col-md-7" > <select multiple= "multiple" "size="
  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=
   "Ten" >option >
  </select>
  <br/>
  <input id= "showvalue" type= "button" value= "Show selected data" >
 </div>

This completes the invocation of the plug-in

Second, expand

A generic, initialized data of the JS function:

/* Initialize duallistbox*///queryparam1: Parameter//selectclass:select element class attribute//selecteddatastr: Select data, multiple to, separate function initlist Box (Queryparam1,selectclass, selecteddatastr) {var paramdata = {' testParam1 ': queryParam1} $.ajax ({ur L: ' Datahandler.ashx ', type: ' Get ', Data:paramdata, Async:true, Success:function (returndata) {VA
     R 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 = Selecteddat
       Astr.split (', ');
         $.each (Selecteddataarray, function (i, Val) {if (O.value = val) {o.selected = ' selected ';
        return false;
      }
       });
     } $ ("." + Selectclass + "") [0].options.add (O);
     }); Render Duallistbox $ ('. ' + Selectclass + '). Bootstrapduallistbox ({NonselecTedlistlabel: ' non-selected ', Selectedlistlabel: ' Selected ', Preserveselectiononmove: ' Moved ', Moveonsel ect:false//,//nonselectedfilter: ' Ion ([7-9]|[
    1][0-2]);
    }, Error:function (e) {alert (e.msg);
  }
   });
 }

HTML code:

<div class= "col-md-7" > <select multiple= "multiple" "size="
  name= "Duallistbox_demo2" class= "Demo2" >
  </select>
  <br/>
  <input id= "showvalue" type= "button" value= "Show selected data"/>
 </div>

Call:

$ (function () {
   //initialization of
   Initlistbox (' hangwei.cnblogs.com ', ' Demo2 ');

   $ ("#showValue"). Click (function () {
    alert ($ (' [name= ' Duallistbox_demo2] '). Val ());});
  

DATAHANDLER.ASHX Code:

<%@ 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 = new {ID = "China", name = "Chinese"};
  var USA = new {id = "USA", name = "USA"};
  var RSA = new {id = "Russia", name = "Russia"};
  var en = new {id = "中文版", name = "UK"};
  var fra = new {id = "France", name = "France"};
  list<object> list = new list<object> ();
  List. ADD (in);
  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;

}}}

Effect:

This article's demo uses the development environment: VS2013,. NET Framework4.5.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is a two-way select control bootstrap Dual ListBox use method, hope to help everyone's study.