轻松使用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 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
基于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 IPV6正则表达式验证代码
2010/02/16 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
php自定义错误处理用法实例
2015/03/20 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
extjs render 用法介绍
2013/09/11 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
Python闭包实现计数器的方法
2015/05/05 Python
Python读写文件方法总结
2015/06/09 Python
python3 读写文件换行符的方法
2018/04/09 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
python MD5加密的示例
2020/10/19 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
如何利用find命令查找文件
2016/11/18 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
物业工作计划书
2014/01/10 职场文书
个人委托书范文
2015/01/28 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL