html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

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

		<link rel="stylesheet" href="css/test.css" />

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

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

	</head>

	<body>

		<div class="content">

			<select multiple="multiple" id="select1">

				<option value="1">篮球</option>

				<option value="2">网球</option>

				<option value="3">棒球</option>

				<option value="4">足球</option>

				<option value="5">排球</option>

			</select>

		 <span id="add">选中右移>></span>

		 <span id="add_all">全部右移>></span>

		</div>

		<div class="content">

			<select multiple="multiple" id="select2">

			</select>

		 <span id="remove"><<选中左移</span>

		 <span id="remove_all"><<全部左移</span>

		</div>

	</body>

</html>

　　css

* {

	padding:0;

	margin: 0;

}

body {

	padding:100px;

	font-size: 15px;

	font-family: "微软雅黑";

}

select {

	width:100px;

	height: 200px;

	padding: 5px;

}

.content {

	float:left;

	text-align: center;

	padding-right: 15px;

}

span {

	font-family: "微软雅黑";

	display:block; width:100px; background:#eee; cursor:pointer; border:1px solid #ccc; padding:5px 0; margin:5px 0;

	font-weight: bold;

	}

　　js

$(document).ready(function() {

      $("#add").click(function() {

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

      })

	$("#add_all").click(function(){

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

		});

     $("#remove").click(function() {

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

    });

	$("#remove_all").click(function() {

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

	});

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

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

	});

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

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

			});

	})

　　效果：

2017-09-25   19:27:23

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

  1. Jquery下拉框左右选择

    1.说明 本文demo实现下拉框左右选择,本文地址:http://www.cnblogs.com/lengzhan/p/6423023.html 2.代码 <!DOCTYPE html PUBL ...

  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. logging error. UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-1: ordinal not in range(128)

    根据错误提示, 找到出错的文件. 可以看到, 出错的文件是 logging 模块中的__init__.py 文件. 根据目录, 找到 这个文件, 并打开它 搜查这个文件的内容, 找'encoding' ...

  2. SpringBoot---监控与管理actuator

    1.概述 SpringBoot在Start POMS中提供了一个特殊依赖模块spring-boot-starter-actuator: 引入spring-boot-starter-actuator模块 ...

  3. JS中JSON.stringify()方法，将js对象（json串）转换成字符串，传入服务器

    JSON 通常用于与服务端交换数据. 在向服务器发送数据时一般是字符串. 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串. 语法 JSON.string ...

  4. FORTRAN学习记录

    WHERE statement http://scv.bu.edu/computation/bluegene/IBMdocs/compiler/xlf-10.1/html/xlflr/where.ht ...

  5. Windows下安装的Jenkins修改默认端口号8080（修改配置文件的方式）

    1.首先在Windows下找到Jenkins安装目录.2.在安装目录下找到jenkins.xml文件 3.打开jenkins.xml文件,找到httpPort=8080 4.修改成你想要的端口号即可, ...

  6. java并发编程笔记（十）——HashMap与ConcurrentHashMap

    java并发编程笔记(十)--HashMap与ConcurrentHashMap HashMap参数 有两个参数影响他的性能 初始容量(默认为16) 加载因子(默认是0.75) HashMap寻址方式 ...

  7. 如何消去delphi Stringgrid重绘时产生重影

    procedure TForm1.Stringgrid1DrawCell(Sender: TObject; ACol, ARow: Integer; Rect: TRect; State: TGrid ...

  8. HP Loadrunner 12.53的下载与安装

    HP Loadrunner 12.53的下载与安装   HP Loadrunner 12.53的下载:http://pan.baidu.com/s/1c23axHm HP Loadrunner 12. ...

  9. 从0开始的InfiniBand硬件踩坑过程

    由于科学计算实验的需求,需要使用InfiniBand做一个持久性内存全互联的分布式存储系统.其中从网卡到交换机使用Mellanox全家桶,而在Mellanox网卡与交换机的使用过程中还是遇到了不少的问 ...

  10. JQuery获取与设置select

    获取select : 1.获取select 选中的 text :    $("#ddlregtype").find("option:selected").tex ...