1、说明

　　本文demo实现下拉框左右选择，本文地址：http://www.cnblogs.com/lengzhan/p/6423023.html

2、代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        .centent

        {

            width: 260px;

        }

        .cententl

        {

            float: left;

        }

        .btnAdd

        {

            float: left;

            padding:30px 5px;

        }

    </style>

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

    <script type="text/javascript">

        $(function () {

            //移到右边

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

                //获取选中的选项，删除自己并追加给对方

                $('#select1 option:selected').appendTo('#select2');

            });

            //移到左边

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

                //获取选中的选项，删除自己并追加给对方

                $('#select2 option:selected').appendTo('#select1');

            });

            //全部移到右边

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

                //获取全部的选项,删除自己并追加给对方

                $('#select1 option').appendTo('#select2');

            });

            //全部移到左边

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

                //获取全部的选项,删除自己并追加给对方

                $('#select2 option').appendTo('#select1');

            });

            //双击选项

            $('#select1').dblclick(function () {

                //获取双击的选项,删除自己并追加给对方

                $("option:selected", this).appendTo('#select2');

            });

            //双击选项

            $('#select2').dblclick(function () {

                //获取双击的选项,删除自己并追加给对方

                $("option:selected", this).appendTo('#select1');

            });

        });

    </script>

</head>

<body>

    <div class="centent">

        <div class="cententl">

            <select multiple="multiple" id="select1" style="width: 100px; height: 160px;">

                <option value="1">课程1</option>

                <option value="2">课程2</option>

                <option value="3">课程3</option>

                <option value="4">课程4</option>

                <option value="5">课程5</option>

                <option value="6">课程6</option>

                <option value="7">课程7</option>

                <option value="8">课程8</option>

            </select>

        </div>

        <div class="btnAdd">

            <input type="button" id="btnAdd" value=" > " /><br />

            <input type="button" id="btnDel" value=" < " /><br />

            <input type="button" id="btnAdds" value=">>" /><br />

            <input type="button" id="btnDels" value="<<" />

        </div>

        <div>

            <select multiple="multiple" id="select2" style="width: 100px; height: 160px;">

            </select>

        </div>

    </div>

</body>

</html>

3、Demo

　　点击下载

Jquery下拉框左右选择的更多相关文章

  1. jquery 下拉框左右选择

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  2. jquery 下拉框 收藏

    jquery 下拉框  Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...

  3. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  4. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  5. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）

    jQuery下拉框操作系列$("option:selected",this)  &&(锋利的jQuery) <!DOCTYPE html> <ht ...

  7. selenium 显示等待wait.until 常用封装 及下拉框的选择操作等

    from selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWait a ...

  8. 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  9. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

随机推荐

  1. 解决：Android4.3锁屏界面Emergency calls only - China Unicom与EMERGENCY CALL语义反复

    从图片中我们能够看到,这里在语义上有一定的反复,当然这是谷歌的原始设计.这个问题在博客上进行共享从表面上来看着实没有什么太大的意义,只是因为Android4.3在锁屏功能上比起老版本号做了非常大的修改 ...

  2. 关于HTTP1.1的长连接

    HTTP是一个构建在传输层的TCP协议之上的应用层的协议,在这个层的协议,是一种网络交互须要遵守的一种协议规范. HTTP1.0的短连接 HTTP 1.0规定浏览器与server仅仅保持短暂的连接.浏 ...

  3. Tomcat配置，Myeclipse破解和各种设置

    转自:http://www.cnblogs.com/tyjsjl/archive/2006/11/14/2156111.html 根据tomcat来配置eclipse和MyEclipse结合使用起来, ...

  4. Hibernate quick start

    Preface Working with both Object-Oriented software and Relational Databases can be cumbersome and ti ...

  5. huawei校招测试题

    三道题两小时. 第一题,圈住所有点的长方形,很简单略过. 第二题:奇偶排序. 奇偶排序 描述: 输入若干(不超过1000个)非负整数数字,请先取出为奇数的数字按从大到小排序,再取出偶数从小到大进行排序 ...

  6. 在vs2005中添加lib库的方法

    方法一:在用到lib的地方加上  //强烈推荐这种方法.#pragma    comment(lib,"libname.lib") 方法二:     点击菜单命令 “项目/属性”, ...

  7. luogu3379 【模板】最近公共祖先(LCA) 倍增法

    题目大意:给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 整体步骤:1.使两个点深度相同:2.使两个点相同. 这两个步骤都可用倍增法进行优化.定义每个节点的Elder[i]为该节点的2^k( ...

  8. POJ3685 Matrix —— 二分

    题目链接:http://poj.org/problem?id=3685 Matrix Time Limit: 6000MS   Memory Limit: 65536K Total Submissio ...

  9. shell脚本怎么调试

    shell是Linux系统上常用的一种脚本语言.一般从事web后台开发的从业者,都会用到shell,因此shell调试也是一项必备的技能.本文教你如何进行shell脚本调试. 工具/原料   Linu ...

  10. Dedecms(织梦)文章内容页和图片集内容页，调用缩略图的方法

    Dedecms(织梦)文章内容页和图片集内容页,调用缩略图的方法,亲测可用! Dedecms(织梦)首页的图片调用,相信大家已经非常的清楚,但是今天我在进行内容页的编写的时候,发现了内容页图片的调用问 ...