腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

輕松使用jQuery雙向select控件Bootstrap Dual Listbox

更新時(shí)間：2015年12月13日 09:44:40 作者：杭偉

這篇文章主要教大家如何輕松使用jQuery雙向select控件Bootstrap Dual Listbox，感興趣的小伙伴們可以參考一下

本文主要為大家介紹了雙向select控件Bootstrap Dual Listbox的使用方法，Bootstrap Dual列表是一個(gè)為響應(yīng)Twitter優(yōu)化的列表框插件，它可以用在所有的現(xiàn)代瀏覽器和觸摸設(shè)備上，分享給大家，具體如下：

效果圖：

一、使用

1、引用css和js文件

 <link href="scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
 <!--<link  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="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>-->
 <script src="scripts/duallistbox/jquery.bootstrap-duallistbox.min.js"></script>

2、初始化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>

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

這樣就完成了插件的調(diào)用

二、擴(kuò)展

一個(gè)通用的、初始化數(shù)據(jù)的js函數(shù)：

/*初始化duallistbox*/
  //queryParam1：參數(shù)
  //selectClass：select元素class屬性
  //selectedDataStr：選中數(shù)據(jù)，多個(gè)以,隔開
  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>

調(diào)用：

$(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;
  }
 }

}

效果：