轻松使用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入门教程(1) 什么是JS
Jan 31 Javascript
JS 常用校验函数
Mar 26 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
vue组件横向树实现代码
Aug 02 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
一篇文章了解正则表达式的替换技巧
Feb 24 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循环
2013/08/09 PHP
php浏览历史记录的方法
2015/03/10 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Python pip 常用命令汇总
2020/10/19 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
采购文员岗位职责
2013/11/20 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
毕业生政审意见范文
2015/06/04 职场文书
员工试用期工作总结
2019/06/20 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python