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


Posted in Javascript onDecember 13, 2015

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

效果图:

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

一、使用

1、引用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>

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>

这样就完成了插件的调用

二、扩展

一个通用的、初始化数据的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;
  }
 }

}

效果:

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

本文的demo使用的开发环境:VS2013、.NET Framework4.5.

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是双向select控件Bootstrap Dual Listbox的使用方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
理解javascript中的with关键字
Feb 15 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 #Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 #Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 #Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 #Javascript
JavaScript文档碎片操作实例分析
Dec 12 #Javascript
javascript性能优化之事件委托实例详解
Dec 12 #Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 #Javascript
You might like
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
js 学习笔记(三)
2009/12/29 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
Ajax基础知识详解
2017/02/17 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python自动化测试实例解析
2014/09/28 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python向图片里添加文字
2019/11/26 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
大学军训自我鉴定
2013/12/15 职场文书
银行职业规划书范文
2013/12/28 职场文书
会议活动邀请函
2014/01/27 职场文书
美容院考勤制度
2014/01/30 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
小学生期末评语大全
2014/04/21 职场文书
法学专业求职信
2014/07/15 职场文书
物流业务员岗位职责
2015/04/03 职场文书
起诉书格式范文
2015/05/20 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python