<!DOCTYPE html>

<html>

<head>

<title>左右选择框</title>  

<style type="text/css">

/*.s1{width:120px;}

#d1{width:510px;height:320px;background-color:#F5DEB3;margin:0 auto;}

#d2{height:30px;font-size:24px;background-color:blue;color:white;}

#d3{padding-left:30px;}*/

</style>

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

</head>

<body>

    <div id="d1">

    <div id="d2">选择</div>

    <div id="d3">

        <table cellpadding="0" cellspacing="8">

            <tbody><tr>

                <td>左</td>

                <td>&nbsp;</td>

                <td>右</td>

            </tr>

            <tr>

                <td>

                    <select id="s1" name="s1" style="width:150px; height:220px;" multiple="multiple">

                        <option value="hh">W1</option>

                    </select>

                </td>

                <td>

                    <p><input id="b1" type="button" class="s1" value="--&gt;"></p>

                    <p><input type="button" id="b2" class="s1" value="--&gt;&gt;"></p>

                    <p><input type="button" id="b3" class="s1" value="&lt;--"></p>

                    <p><input type="button" id="b4" class="s1" value="&lt;&lt;--"></p>

                </td>

                <td><select id="s2" name="s2" style="width:150px;height:220px;" multiple="multiple"><option value="zsf">12321</option><option value="xrr">23</option></select></td>

            </tr>

        </tbody>

        </table>

    </div>

</div>

 <script type="text/javascript">

     $(function(){

        $('#b1').click(function(){

            $obj = $('select option:selected').clone(true);

            if($obj.size() == 0){

                alert("请至少选择一条!");

            }

            $('#s2').append($obj);

            $('select option:selected').remove();

        });

        $('#b2').click(function(){

            $('#s2').append($('#s1 option'));

        });

        $('#b3').click(function(){

            $obj = $('select option:selected').clone(true);

            if($obj.size() == 0){

                alert("请至少选择一条!");

            }

            $('#s1').append($obj);

            $('select option:selected').remove();

        });

        $('#b4').click(function(){

            $('#s1').append($('#s2 option'));

        });

        $('option').dblclick(function(){

            var flag = $(this).parent().attr('id');

            if(flag == "s1"){

                var $obj = $(this).clone(true);

                $('#s2').append($obj);

                $(this).remove();

            } else {

                var $obj = $(this).clone(true);

                $('#s1').append($obj);

                $(this).remove();

            }

        });

    });

 </script>

</body>  

</html>

引入jQuery即可

jQuery左右选择框的更多相关文章

  1. JQuery 日期选择框

    一    jeDate日期控件,关于官方的文档请查看: http://www.jayui.com/jedate/ 1 引入js文件 <script type="text/javascr ...

  2. 自己写的jQuery 左右选择框，大家多多指教！

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  3. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  4. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  5. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  6. 用jquery修改默认的单选框radio或者复选框checkbox选择框样式

    默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...

  7. ul+jquery自定义下拉选择框

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jQuery插件——下拉选择框

    其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

  9. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

随机推荐

  1. python——关于Python Profilers性能分析器

    1. 介绍性能分析器 profiler是一个程序,用来描述运行时的程序性能,并且从不同方面提供统计数据加以表述.Python中含有3个模块提供这样的功能,分别是cProfile, profile和ps ...

  2. cordova百度地图定位Android版插件

    本插件利用百度地图提供的定位功能进行Android版手机定位. 为什么没有iOS版? 因为iOS版有官方的定位插件cordova-plugin-geolocation可以使用. 请参照:cordova ...

  3. javascript-使用el表达式获取后台传递的数据

      js获取后台数据 CreateTime--2017年5月26日16:14:14Author:Marydon 在js中使用el表达式的前提是:HTML引用js使用内联方式(即在JSP页面内部使用js ...

  4. windows中修改catalina.sh上传到linux执行报错This file is needed to run this program解决

    windows中修改catalina.sh上传到linux执行报错This file is needed to run this program解决 一.发现问题 由于tomcat内存溢出,在wind ...

  5. SqlServer报错：System.Data.SqlClient.SqlException

    在将Asp.Net MVC4项目部署到新机器上进行调试的时候,出现了如下错误: System.Data.SqlClient.SqlException 具体的内容如下: System.Data.SqlC ...

  6. C语言指针的易错点

    1.内存泄漏:申请的堆内存没有释放. 2.内存污染:前面非法操作使用内存(没有报错),后面写着写着就出错.如下代码: 当结构体中只有划线部分代码时,在编译器中编写不会报错,但此时已经造成非法操作内存, ...

  7. C语言之文件操作08——总结

    C程序的文件操作共涵盖7个例题,包括格式打印,文件读取,条件查找,矩阵的文件操作,数据格式输入及调用计算等内容. 文件操作使得程序有更强的拓展性,使其能够单独保存数据.这为程序的调试和优化打下了坚实的 ...

  8. redis安装和配置（一）

    Redis 的官方下载站是http://redis.io/download 怎么安装 Redis 数据库呢?下面将介绍Linux 版本的安装方法 步骤一: 下载Redis 下载安装包:wget htt ...

  9. 【JS设计模式】装饰者模式

    装饰者模式:在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象 装饰模式的特点 (1) 装饰对象和真实对象有同样的接口.这样clien ...

  10. sitemesh 2.4 装饰器学习

    SiteMesh 是一个网页布局和修饰的框架,利用它可以将网页的内容和页面结构分离,以达到页面结构共享的目的 SiteMesh是OpenSymphony团队开发的JEE框架之一,它是一个非常优秀的页面 ...