这个是select版的，若想美化某些样式是不支持得，可以用div模拟版的，功能基本实现能用了，需要其他功能自己加上。

div模拟版链接：http://www.cnblogs.com/tie123abc/p/6018755.html

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>双向列表选择器select版</title>

<script type="text/javascript" src="../public/jquery-1.8.2.js"></script>

<script type="text/javascript">

/**

 * two_way_list_selector.js - v1.0.0 (2016/7/26)

 *

 * Allows you to easily page layout!

 * by tie. qq：2185987263

 *

 * Copyright (C) 2016, tie.

 * All rights reserved.

 *

 **/

var two_way_list_selector=function(o){

    var obj=o;

    var btn_a=o.find(".btn_a");

    var btn_b=o.find(".btn_b");

    var btn_c=o.find(".btn_remove_all");

    var btn_d=o.find(".btn_add_all");

    var select_a=o.find(".select_a");

    var select_b=o.find(".select_b");

    //进行排序

    var option_sort=function(o){

        o.html(o.find("option").toArray().sort(function(a, b){

            return parseInt($(a).attr("data-index")) - parseInt($(b).attr("data-index"));

        }));

        obj.find("option").unbind("dblclick").dblclick(function(){

            _dblclick($(this));

        });

    }

    //在列表中双击时

    var _dblclick=function(o){

        var flag = o.parent().attr('class');

        var a ;

        if(flag == "select_a"){

            a = o.clone(true);

            select_b.append(a);

            o.remove();

            option_sort(select_b);

        } else {

            a = o.clone(true);

            select_a.append(a);

            o.remove();

            option_sort(select_a);

        }

    }

    //选项双击时

    obj.find("option").dblclick(function(){

        _dblclick($(this));

    });

    //加入选中

    btn_a.click(function(){

        var a = select_a.find("option:selected").clone(true);

        if(a.size() == 0){

            return false;

        }

        select_b.append(a);

        select_a.find("option:selected").remove();

        option_sort(select_b);

    });

    //删除选中

    btn_b.click(function(){

        var a = select_b.find("option:selected").clone(true);

        if(a.size() == 0){

            return false;

        }

        select_a.append(a);

        select_b.find("option:selected").remove();

        option_sort(select_a);

    });

    //删除全部

    btn_c.click(function(){

        select_a.append(select_b.find("option"));

        option_sort(select_a);

    });

    //添加全部

    btn_d.click(function(){

        select_b.append(select_a.find("option"));

        option_sort(select_b);

    });

}

//页面加载完毕后

$(document).ready(function(e) {

    two_way_list_selector($("#two_way_list_selector_a"));

    two_way_list_selector($("#two_way_list_selector_b"));

});

</script>

<style type="text/css">

@charset "utf-8";

.two_way_list_selector {

    width: 100%;

    height: 250px;

}

.two_way_list_selector .select_l, .two_way_list_selector .select_r {

    width: 40%;

    height: 250px;

    float: left;

    border: 1px solid #CCC;

}

.two_way_list_selector .select_l .option {

    height: 29px;

    line-height: 29px;

    border-bottom: 1px solid #ddd;

    text-indent:10px;

}

.two_way_list_selector .select_l select, .two_way_list_selector .select_r select {

    width: 100%;

    height: 220px;

    border: none;

    outline: none;

}

.two_way_list_selector .select_r select {

    height: 250px;

}

.two_way_list_selector .select_l select:hover, .two_way_list_selector .select_r select:hover {

    border: none;

    box-shadow: none;

}

.two_way_list_selector .select_l select option, .two_way_list_selector .select_r select option {

    padding: 10px;

    border-bottom: 1px solid #ddd;

}

.two_way_list_selector .select_l select option:last-child, .two_way_list_selector .select_r select option:last-child {

    border-bottom: none;

}

.two_way_list_selector .select_btn {

    width: 10%;

    height: 250px;

    float: left;

    display: table;

    text-align: center;

}

.two_way_list_selector .select_btn div {

    height: 250px;

    display: table-cell;

    vertical-align: middle;

}

.two_way_list_selector .select_btn div input {

    width: 90%;

    margin: 1px;

    text-align: center;

    font-weight: 100;

    color: #999;

}

</style>

</head>

<body>

<div id="two_way_list_selector_a" class="two_way_list_selector margin_top_10">

  <div class="select_l">

    <div class="option">名称</div>

    <select size="5" multiple class="select_a">

      <option value="1" data-index="0">1</option>

      <option value="2" data-index="1">2</option>

      <option value="3" data-index="2">3</option>

      <option value="4" data-index="3">4</option>

      <option value="5" data-index="4">5</option>

      <option value="6" data-index="5">6</option>

      <option value="7" data-index="6">7</option>

    </select>

  </div>

  <div class="select_btn">

    <div>

      <input type="button" value=">" class="button btn_a">

      <input type="button" value=">>" class="button btn_add_all">

      <input type="button" value="<<" class="button btn_remove_all">

      <input type="button" value="<" class="button btn_b">

    </div>

  </div>

  <div class="select_r">

    <select size="5" multiple class="select_b">

    </select>

  </div>

</div>

<br>

<div id="two_way_list_selector_b" class="two_way_list_selector margin_top_10">

  <div class="select_l">

    <div class="option">名称</div>

    <select size="5" multiple class="select_a">

      <option value="a" data-index="0">a</option>

      <option value="b" data-index="1">b</option>

      <option value="c" data-index="2">c</option>

      <option value="d" data-index="3">d</option>

      <option value="e" data-index="4">e</option>

      <option value="f" data-index="5">f</option>

      <option value="g" data-index="6">g</option>

    </select>

  </div>

  <div class="select_btn">

    <div>

      <input type="button" value=">" class="button btn_a">

      <input type="button" value=">>" class="button btn_add_all">

      <input type="button" value="<<" class="button btn_remove_all">

      <input type="button" value="<" class="button btn_b">

    </div>

  </div>

  <div class="select_r">

    <select size="5" multiple class="select_b">

    </select>

  </div>

</div>

</body>

</html>

jquery双向列表选择器select版的更多相关文章

  1. jquery双向列表选择器DIV模拟版

    前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:htt ...

  2. jQuery实现列表框双向选择操作

    对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...

  3. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  4. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  5. jQuery使用（一）：jQuery对象与选择器

    一.简单的一些介绍 1.jQuery是由普通的是由一些系列操作DOM节点的函数和一些其他的工具方法组成的js库. 2.为什么要使用jQuery库? jQuery面向用户良好的设计在使用过程中彻底解放了 ...

  6. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  7. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  8. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  9. jQuery系列 第四章 jQuery框架的选择器

    第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...

随机推荐

  1. C#开发中使用配置文件对象简化配置的本地保存

    C#开发中使用配置文件对象简化配置的本地保存 0x00 起因 程序的核心是数据和逻辑,开发过程中免不了要对操作的数据进行设置,而有些数据在程序执行过程中被用户或程序做出的修改是应该保存下来的,这样程序 ...

  2. Git 进阶指南（git ssh keys / reset / rebase / alias / tag / submodule ）

    在掌握了基础的 Git 使用 之后,可能会遇到一些常见的问题.以下是猫哥筛选总结的部分常见问题,分享给各位朋友,掌握了这些问题的中的要点之后,git 进阶也就完成了,它包含以下部分: 如何修改 ori ...

  3. EasyPR--开发详解（6）SVM开发详解

    在前面的几篇文章中,我们介绍了EasyPR中车牌定位模块的相关内容.本文开始分析车牌定位模块后续步骤的车牌判断模块.车牌判断模块是EasyPR中的基于机器学习模型的一个模块,这个模型就是作者前文中从机 ...

  4. [转]VS2015中臃肿的ipch和sdf文件

    使用VS2010建立C++解决方案时,会生成SolutionName.sdf和一个叫做ipch的文件夹,这两个文件再加上*.pch等文件使得工程变得非常的庞大, 一个简单的程序都会占用几十M的硬盘容量 ...

  5. PDO概念 分析 练习

    PDO 翻译过来叫做数据访问抽象层 它是一个数据访问的层面,实际上是一个类,也就是说所有操作数据库的代码,都是通过这个层面完成的 该图好理解大概就是这样一种模式 现在考虑的是能不能使用同一个类,上层代 ...

  6. Nginx服务器之Nginx与tomcat结合访问jsp

    本文使用linux centos系统 本文概述: JSP是一种动态网页技术标准.使用的方式是在HTML文件中插入程序段和JSP标记,而形成JSP文件.使用JSP开发WEB应用可以跨平台开发.但jsp需 ...

  7. 分页实现：Offset-Fetch

    SQL Server 2012 新增 Offset-Fetch子句,用于从有序结果集中,跳过一定数量的数据行,获取指定数量的数据行,从而达到分页的目的.经过测试,在分页查询上,从逻辑读取数和响应时间来 ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统（47）-工作流设计-补充

    系列目录 补充一下,有人要表单的代码,这个用代码生成器生成表Flow_Form表的Index代码就可以 加上几个按钮就可以了 <div class="mvctool"> ...

  9. RPC远程过程调用学习之路（一）：用最原始代码还原PRC框架

    RPC: Remote Procedure Call 远程过程调用,即业务的具体实现不是在自己系统中,需要从其他系统中进行调用实现,所以在系统间进行数据交互时经常使用. rpc的实现方式有很多,可以通 ...

  10. 压力测试之badboy和Jmeter的简单使用方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 所谓压力测试是指,通过确定一个系统的瓶颈或者不能接收的性能点, ...