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. [Luogu1938][USACO09NOV]找工就业Job Hunt

    原题链接:https://www.luogu.org/problem/show?pid=1938 这一道题有一个比较难的点就是,这一张图上,是点上有权.既然点上有权的话,我们就不好一下子使用最短路了. ...

  2. 特朗普或出席！富士康耗资100亿美元建LCD液晶面板厂

    富士康建液晶工厂,富士康科技集团发言人证实,富士康科技集团将于今年6月28日耗资100亿美元的LCD面板厂举行动工仪式. 富士康周四表示,他已经了解到,仪式将于今年6月28日举行,包括美国总统特朗普总 ...

  3. asp.net core web api 版本控控制

    通过微软的一个库Microsoft.AspNetCore.Mvc.Versioning实现asp.net core web api的版本控制. 以两种形式组织了Controller: 文件夹分开 命名 ...

  4. NetCore中的环境变量的值取自于哪里？

    环境 操作系统 win10 IIS 10 net core 2.2 ,net core 3.0 分别生成了三个环境变量的配置文件: 以及测试代码: public void Configure(IApp ...

  5. leetcode-15双周赛-1288-删除被覆盖区间

    题目描述: 方法一:排序O(Nlogn) class Solution: def removeCoveredIntervals(self, intervals: List[List[int]]) -& ...

  6. 【转】跨域资源共享 CORS 详解

    本文来源:http://www.ruanyifeng.com/blog/2016/04/cors.html 阮一峰老师的网络日志 CORS是一个W3C标准,全称是"跨域资源共享"( ...

  7. UiAutomator和Appium之间的区别2

    UiAutomator和Appium之间的区别和联系 联系: 在Android端,appium基于WebDriver协议,利用Bootstrap.jar,最后通过调⽤用UiAutomator的命令,实 ...

  8. 08-图7 公路村村通（30 分）Prim

    现有村落间道路的统计数据表中,列出了有可能建设成标准公路的若干条道路的成本,求使每个村落都有公路连通所需要的最低成本. 输入格式: 输入数据包括城镇数目正整数N(≤1000)和候选道路数目M(≤3N) ...

  9. python3下tomorow模块报语法错误def async(n, base_type, timeout=None): ^ SyntaxError: invalid syntax

    python3 pip 安装tomorrow模块,调用时候会报错:def async(n, base_type, timeout=None): ^ SyntaxError: invalid synta ...

  10. Hive if和coalesce函数

    链接:https://blog.csdn.net/qq_26442553/article/details/79465417 if 函数举例: