<!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. vue 不能检测数组长度 值变化原因解析

    1.vue不能检测数组长度或者值的变化 (1)数组长度变化 未检测到 <!DOCTYPE html> <html lang="en"> <head&g ...

  2. [leetcode]Path Sum--巧用递归

    题目: Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up ...

  3. 5种样式实现div容器中三图摆放实例对比说明

    代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...

  4. docker build 的 cache 机制

    cache 机制注意事项 可以说,cache 机制很大程度上做到了镜像的复用,降低存储空间的同时,还大大缩短了构建时间.然而,不得不说的是,想要用好 cache 机制,那就必须了解利用 cache 机 ...

  5. Linux 网卡丢包严重

    http://hi.baidu.com/scstwy/item/cad0fbef1fdc18d3eb34c9d9

  6. 采集Snoopy.class.php

    <?php /************************************************* Snoopy - the PHP net client Author: Mont ...

  7. Android studio 使用心得(四)—android studio 多渠道打包(二)

    Android studio 使用心得(四)—android studio 多渠道打包 这篇文章讲了一种打包方式.是直接在android studio 里面可视化操作,结合配置文件.我个人觉得严格上来 ...

  8. Android 自己定义ViewGroup手把手教你实现ArcMenu

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37567907 逛eoe发现这种UI效果,感觉非常不错,后来知道github上有这 ...

  9. top命令中内存参数

    总结:VIRT 虚拟内存中含有共享库.共享内存.栈.堆,所有已申请的总内存空间.RES  是进程正在使用的内存空间(栈.堆),申请内存后该内存段已被重新赋值.SHR  是共享内存正在使用的空间.SWA ...

  10. A successful Git branching model/GIT分支管理是一门艺术

    英文原文:http://www.nvie.com/posts/a-successful-git-branching-model/ 原文作者:Vincent Driessen 本文经Linux大棚博主总 ...