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. [BZOJ2341][Shoi2011]双倍回文 manacher+std::set

    题目链接 发现双倍回文串一定是中心是#的回文串. 所以考虑枚举#点.发现以\(i\)为中心的双倍回文的左半部分是个回文串,其中心一定位于\(i-\frac{pal[i]-1}2\)到\(i-1\)之间 ...

  2. Autoit 3 常用的语句

    {系统环境变量} EnvUpdate ( ) ;更新环境变量 EnvGet ( "变量名称" ) ;取环境变量 ClipGet ( ) ;取剪辑板文本 EnvSet ( " ...

  3. springboot上传excel到oss

    参考:https://blog.csdn.net/qq_34864038/article/details/80239320 https://blog.csdn.net/qq_27319683/arti ...

  4. sql中使一个字段升序，一个字段降序

    ORDER BY _column1, _column2; /* _column1升序,_column2升序 */ ORDER BY _column1, _column2 DESC; /* _colum ...

  5. 4412 Linux设备总线

    总线_设备_驱动注册流程详解 注册流程图 • 设备一般都需要先注册,才能注册驱动– 现在越来越多的热拔插设备,反过来了.先注册驱动,设备来了再注册 设备 • 本节使用的命令– 查看总线的命令#ls / ...

  6. Delphi Base64编码/解码

    Uses CnBase64: CnBase64.Base64Encode(Edit1.Text, Psw64);

  7. unicode字符集范围

    引言       unicode是全世界统一的编码规则,但只规定了各种字符的数字编码(官网:www.unicode.org),具体实现的存储方式有utff-8,utf-16,utf-32等形式,各种形 ...

  8. 2019 牛客暑期多校 第八场 A All-one Matrices (单调栈+前缀和）

    题目:https://ac.nowcoder.com/acm/contest/888/A 题意:找全1矩阵的个数,并且这个全1矩阵不被其他全1矩阵包含 思路:这里引用付队说的话 -> { 这类问 ...

  9. [CSP-S模拟测试]:beauty（搜索）

    题目描述 距离产生美.一棵包含$n$个点的树,有$2k$个不同的关键点,我们现在需要将这些点两两配对,对于一种形如:$$(u_1,v_1),(u_2,v_2),...,(u_k,v_k)$$的配对方案 ...

  10. python中常犯错误之字符串列表下标问题

    下标用得是中括号[] 不是小括号() 1,python中的小括号( ):代表tuple元组数据类型,元组是一种不可变序列.创建方法很简单,大多时候都是用小括号括起来的. 2.python中的中括号[ ...