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. Flutter的生命週期

    Flutter跟安卓的Activity.iOS的ViewController一样拥有自己的生命周期, Flutter中一切都是Widget,渲染方式有点像H5的DOM树. 先看生命周期图: Flutt ...

  2. 11.IPFS搭建及上传获取数据——2019年12月12日

    title: ipfs使用 date: "2019-09-26 10:17:16" tags: ipfs categories: 技术驿站 1.mac安装ipfs--使用npm工具 ...

  3. windows下zookeeper单机版安装+dubbo-admin安装注意点

    一:zookeeper安装 安转包下载地址:http://www.apache.org/dyn/closer.cgi/zookeeper 复制修改conf下的zoo_sample.cfg为zoo.cf ...

  4. JS中正则表达式

    正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具.简单来说正则表达式就是处理字符串的,我们可以用它来处理一些复杂的字符串. 1.创建方式 pattern(模式):描述了表达式 ...

  5. mysql经典面试题之学生成绩表

    需要数据库表1.学生表 Student(SID,Sname,Sage,Ssex) --SID 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 2.课程表 Course(CID, ...

  6. PHP运行出现Notice

    问题: Notice:Notice是PHP 的提示而非报错,PHP本身不需要事先声明变量即可直接使用,但是对未声明变量会有提示.在网站正式开始运行时,会把提示关了的. 关闭PHP提示的方法: 搜索ph ...

  7. c++文件拷贝

    #include<fstream>void Copyfile( char* FileSource, char* FileItem ){fstream fsCopee( FileSource ...

  8. JetBrains.dotPeek

    Free .NET Decompiler and Assembly Browser Decompile .NET assemblies to C# dotPeek is a free-of-charg ...

  9. 神他么奇怪NoClassDefFoundError

    javaweb 项目,部署在Tomcat服务器 十分奇葩的问题 之前一直好好的,今天突然就给报错.代码没动过.真是奇葩.创建User对象报NoClassDefFoundError, User类是一个普 ...

  10. 【读书笔记】：MIT线性代数(2):Vector Spaces and Subspaces

    Vector Space: R1, R2, R3,R4 , .... Each space Rn consists of a whole collection of vectors. R5 conta ...