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. 线程池ThreadPoolExecutor分析

    线程池.线程池是什么,说究竟,线程池是处理多线程的一种形式,管理线程的创建,任务的运行,避免了无限创建新的线程带来的资源消耗,可以提高应用的性能.非常多相关操作都是离不开的线程池的,比方android ...

  2. javascript读取和改动原型特别须要注意的事儿，由于原型的读写不具有对等性

    对于从原型对象继承而来的成员,其读和写具有内在的不正确等性.比方有一个对象A,假设它的原型对象是B.B的原型对象是null.假设我们须要读取A对象的name属性值,那么JS会优先在A中查找.假设找到了 ...

  3. 当年用httpclient时踩过的那些坑

    一.前言 httpclient是java开发中最常用的工具之一,通常大家会使用其中比较基础的api去调用远程.长期开发爬虫,会接触httpclient不常用的api,同时会遇到各式各样的坑,本文将总结 ...

  4. 高仿美团iOS版，版本5.7

    高仿美团iOS版,版本:5.7 iOS技术交流群:112365317 github链接:https://github.com/lookingstars/meituan 假设你认为不错.欢迎star 哦 ...

  5. layer弹出层不居中解决方案，仅显示遮罩，没有弹窗

    问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一.问题描述 用layer做操作结果 ...

  6. Vue 之 npm 及 安装的包

    1  npm相关 1.1 npm 是 基于Node.js 的,所以要先安装Node.js 在浏览器地址栏输入https://nodejs.org/en/, 进入Node.js官网后,点击下载左边的稳定 ...

  7. UVA - 12338 Anti-Rhyme Pairs 二分+hash

    题目链接:传送门 题意: 给你n个串 问你任意两个串的最大公共前缀长度是多少 题解: 二分+hash 思路很明显,我最近用来写hash 很鸡肋 #include<bits/stdc++.h> ...

  8. UR#34. 多项式乘法

    #34. 多项式乘法 统计 描述 提交 自定义测试 这是一道模板题. 给你两个多项式,请输出乘起来后的多项式. 输入格式 第一行两个整数 nn 和 mm,分别表示两个多项式的次数. 第二行 n+1n+ ...

  9. XFire WebService demo

    XFire创建WebService实例应用 XFire使得在JavaEE应用中发布Web服务变得轻而易举.和其他Web服务引擎相比,  XFire的配置非常简单,可以非常容易地和Spring集成.   ...

  10. 如何去除Office Excel的密码保护？

    企图更改Excel文件内容,然而却弹出如下提示: 根据提示,我尝试解除保护表,却要求输入密码: 这就尴尬了=_=密码不是我设定的 问了度娘,找到了解决方案 将Excel文件扩展名更改为rar, 使用压 ...