<!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. 算法笔记_161:算法提高 十进制数转八进制数(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 编写函数,其功能为把一个十进制数转换为其对应的八进制数.程序读入一个十进制数,调用该函数实现数制转换后,输出对应的八进制数. 样例输入 9274 样 ...

  2. Drupal的错误和异常处理

    Drupal在配置阶段的最开始就设置了自己的错误处理器和异常处理器: function _drupal_bootstrap_configuration() { set_error_handler('_ ...

  3. 基于mybatis-generator代码生成工具改（链式方法实体版）

    概述 一直以来使用原生mybatis-generator的我发现有一个地方很不方便,即它生成的实体类的set方法返回值是void,而目前比较流行的则是链式set的写法,即set方法返回值不再是void ...

  4. 《Javascript权威指南》学习笔记之十九--HTML5 DOM新标准---处理文档元信息和管理交互能力

    一.了解DOM 1.DOM是Document Object Model的缩写,即文档对象类型,是文档在内存中的表示形式,是一个应用程序接口,定义了文档的逻辑结构以及一套訪问和处理文档的方法. 2.HT ...

  5. 在Docker中执行web应用

    启动一个简单的web 应用 使用社区提供的模板,启动一个简单的web应用,熟悉下各种Docker命令的使用: # docker run -d -P training/webapp python app ...

  6. jetty maven插件端口设置

    在jetty的maven插件中有两种方式设置jetty的端口(默认为:8080). 第一种,通过命令行,在启动jetty的时候设置:mvn -Djetty.port=8081 jetty:run 第二 ...

  7. php处理行业分类数据

    实现步骤: 1.将excel表格存储为后缀名为 .csv格式的文件: 2.将.csv格式文件导入到mysql数据库中: 3.通过条件查询将所需要的数据查出并导入另一个数据表中: 下面是一些php片段: ...

  8. winfrom更新

    原理: 工具生成更新配置节xml放到文件服务器上,外网可访问: 能过本地配置文件与服务器配置文件日期属性对比及配置节版本与大小属性判断有无更新: 存在更新,将文件从服务器下载到客户端,并替换原程序重启 ...

  9. Oauth2.0协议曝漏洞 大量社交网站隐私或遭泄露

    2014年是IT业界不平常的一年,XP停服.IE长老漏洞(秘狐)等等层出不穷,现在,社交网络也爆出惊天漏洞:Oauth2.0协议漏洞 继OpenSSL漏洞后,开源安全软件再曝安全漏洞.新加坡南洋理工大 ...

  10. Hibernate一级缓存和二级缓存具体解释

    一.一级缓存二级缓存的概念解释 (1)一级缓存就是Session级别的缓存,一个Session做了一个查询操作,它会把这个操作的结果放在一级缓存中.假设短时间内这个 session(一定要同一个ses ...