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. FreeBSD虚拟机——小折腾

    最近,突然想起来Linux了,因为前段时间接触了DOS命令,提高了自己的工作效率,这会想再温习下Linux的CLI,无奈windows下unix命令,水土不服,因此想尝试虚拟机,虚拟机软件无非vmwa ...

  2. GO富集分析 信号通路

    基因富集分析是分析基因表达信息的一种方法,富集是指将基因按照先验知识,也就是基因组注释信息进行分类. 信号通路是指能将细胞外的分子信号经细胞膜传入细胞内发挥效应的一系列酶促反应通路.这些细胞外的分子信 ...

  3. HDU 6055 Regular polygon —— 2017 Multi-University Training 2

    Regular polygon Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  4. ThinkPHP5在PHP7以上使用QueryList4， ThinkCMF在PHP5中使用QueryList3教程

    QueryList 是一款用于网页采集爬虫的框架,官方最新版本为QueryList4,QueryList4版本只能在PHP7以上使用: 在PHP7以上环境中,如何在ThinkPHP5中使用QueryL ...

  5. http 请求包含哪几个部分（请求行、请求头、请求体）

    http协议报文     1.请求报文(请求行/请求头/请求数据/空行)         请求行             求方法字段.URL字段和HTTP协议版本             例如:GET ...

  6. linux显示文本文件指定行数的数据

    sed -n '2,4p' /core/home_info.txt 显示这个txt的2-4行,此外还有 cat /core/home_info.txt |   tail -n 1000:显示最后100 ...

  7. springboot 应用程序的文件检索描述

    SpringApplication从application.properties以下位置的文件加载属性并将它们添加到Spring Environment: 一个/config当前目录下的子目录. 当前 ...

  8. jq与js获取值操作

    jq与js获取值操作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  9. row_number() over partition by 分组聚合

    分组聚合,就是先分组再排序,可以的话顺手标个排名:如果不想分组也可以排名:如果不想分组同时再去重排名也可以 ROW_NUMBER() OVER( [PARTITION BY column_1, col ...

  10. idhttp提交post

    var Param:TStringList; RStream:TMemoryStream;begin Param:=TStringList.Create; RStream:=TMemoryStream ...