jquery双向列表选择器select版

作者：王俞宇淑珮_166 | 来源：互联网 | 2023-09-16 09:25

这个是select版的，若想美化某些样式是不支持得，可以用div模拟版的，功能基本实现能用了，需要其他功能自己加上。div模拟版链接：http:www.cnblogs.comtie123abcp6018755.html&amp;lt;!doctypehtml&amp;gt;&amp;lt;html&amp;gt;&am

jquery双向列表选择器select版这个是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">1option>
      <option value="2" data-index="1">2option>
      <option value="3" data-index="2">3option>
      <option value="4" data-index="3">4option>
      <option value="5" data-index="4">5option>
      <option value="6" data-index="5">6option>
      <option value="7" data-index="6">7option>
    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">aoption>
      <option value="b" data-index="1">boption>
      <option value="c" data-index="2">coption>
      <option value="d" data-index="3">doption>
      <option value="e" data-index="4">eoption>
      <option value="f" data-index="5">foption>
      <option value="g" data-index="6">goption>
    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>

推荐阅读

io
jq实现定时弹出广告

首页#father{border:0pxso ... [详细]

蜡笔小新 2024-09-27 17:56:58
io
下载进度的制作

这两天做了一个小项目，里面有个下载进度的进度条需要制作。先看呈现的效果：点击进度，然后依次递增，直到递增到百分之百。现在把这部分代码分享下来。<!DOCTYPEhtml><html ... [详细]

蜡笔小新 2024-09-27 14:38:43
input
jQuery过滤器（子元素过滤器、表单对象属性过滤器）详解

子元素过滤器在页面设计过程中需要突出某些行时，可以通过基本过滤选择器中的:eq()来实现表单中行的凸显，但不能同时让多个表具有相同的效果。在jQuer ... [详细]

蜡笔小新 2024-09-27 04:00:36
io
jqueryui中的dialog，官网上经典的例子jqueryui中的dialog，官网上经典的例子

jqueryui中dialog和easyui中的dialog很像，但是最近用到的时候全然没有印象，一段时间不用就忘记了，这篇随笔介绍一下这个控件。1.实例官网源代码中给出了一些实例，首先看看实例是什么样子的。 a.默认功能也是最简单的应用，也就是打开一个对话框，代码如下&amp;lt;!doctypehtml&amp;gt;&amp;lt;html ... [详细]

蜡笔小新 2024-09-25 13:11:11
input
使用HTML创建弹出框以便用户输入信息

在做项目的过程中，我们时常需要进行一些弹框操作，比如在后台管理时需要进行的一些增删改操作，这个时候我们需要使用到弹框，或者在 ... [详细]

蜡笔小新 2023-10-14 08:49:35
string
Flex中使用filter过滤数据

Flex中使用filter过滤数据 ... [详细]

蜡笔小新 2024-09-29 14:51:58
string
rbac 4表常规设计

rbac4表常规设计设计模型：1、管理员表（users）Schema::create('users',function(Blueprint$table){$tabl ... [详细]

蜡笔小新 2024-09-29 11:44:38
io
JS·经典·炫彩菜单(动画效果) for jquery

CSS样式body{font-size:12px;}.menuBox{width:50%;height:auto;margin:0auto;}.menuBoxul{margin:0 ... [详细]

蜡笔小新 2024-09-25 15:06:41
io
使用html2canvas截图网页全页或者某个元素

使用html2canvas截图网页全页或者某个元素 ... [详细]

蜡笔小新 2024-09-25 13:50:20
md5
前后端数据交互常见问题：JSON parse error: Unrecognized token ‘phoneNum‘

方法一：前端改成：去掉contentType属性（是对发送过去的数据格式限制），dataType是对接收数据的 ... [详细]

蜡笔小新 2024-09-25 05:40:41
io
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
io
clone的fork与pthread_create创建线程有何不同

本文讨论了clone的fork与pthread_create创建线程的不同之处。进程是一个指令执行流及其执行环境，其执行环境是一个系统资源的集合。在调用系统调用fork创建一个进程时，子进程只是完全复制父进程的资源，这样得到的子进程独立于父进程，具有良好的并发性。但是二者之间的通讯需要通过专门的通讯机制，另外通过fork创建子进程系统开销很大。因此，在某些情况下，使用clone或pthread_create创建线程可能更加高效。 ... [详细]

蜡笔小新 2023-12-12 20:00:06
io
Vue案例（搜索页面）

<!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]

蜡笔小新 2023-10-16 06:20:19
c语言
编译原理c语言词法分析器,用C语言实现一个真正的词法分析器

词法分析，是编译器的第一个模块，也是最简单的模块。最简单，指的是相对于编译器这种大型程序而言，与一般的代码相比还是有点复杂的 ... [详细]

蜡笔小新 2024-09-29 12:51:26
match
Backwardsincompatible change made.

Commit1ced2a7433ea8937a1b260ea65d708f32ca7c95eintroduceda+Clonetraitboundtom ... [详细]

蜡笔小新 2023-12-14 15:35:09

王俞宇淑珮_166

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章