jquery 下拉框左右选择
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 下拉框左右选择的更多相关文章
- Jquery下拉框左右选择
1.说明 本文demo实现下拉框左右选择,本文地址:http://www.cnblogs.com/lengzhan/p/6423023.html 2.代码 <!DOCTYPE html PUBL ...
- jquery 下拉框 收藏
jquery 下拉框 Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...
- JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）
jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery) <!DOCTYPE html> <ht ...
- selenium 显示等待wait.until 常用封装 及下拉框的选择操作等
from selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWait a ...
- 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...
- jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）
效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
随机推荐
- 【学习笔记】圆方树（CF487E Tourists）
终于学了圆方树啦~\(≧▽≦)/~ 感谢y_immortal学长的博客和帮助 把他的博客挂在这里~ 点我传送到巨佬的博客QwQ! 首先我们来介绍一下圆方树能干什么呢qwq 1.将图上问题简化到树上问题 ...
- Hadoop的基础命令
首次使用Hadoop时,格式化文件系统命令:hdfs namenode -format 启动HDFS:start-dfs.sh 启动YARN:start-all.sh start-all.sh等价于s ...
- TypeError:NoneType object is not callable情况下的错误
只用在该视图函数下面加上return ‘值’
- 4412 搭建和测试NFS服务器
一.NFS网络文件系统 NFS是Network FileSystem的缩写,NFS是基于UDP/IP协议的应用.它的最大功能就是可以通过网络让不同的机器,不通的操作系统彼此共享文件, 可以通过NFS挂 ...
- 【WebSocket】WebSocket消息推送
准备使用WebSocket实现Java与Vue或者安卓间的实时通信,实现私密聊天.群聊.查询下资料备用. WebSocket客户端 websocket允许通过JavaScript建立与远程服务器的连接 ...
- AcWing 244. 谜一样的牛 （树状数组+二分）打卡
题目:https://www.acwing.com/problem/content/245/ 题意:有n只牛,现在他们按一种顺序排好,现在知道每只牛前面有几只牛比自己低,牛的身高是1-n,现在求每只牛 ...
- 使用lambda编写九九乘法表
Java 8 出来有一段时间了,支持lambda表达式 非常的赞. lambda表达式 即匿名方法,属于一种轻量级的封装 lambda表达式的语法由参数列表.箭头符号->和函数体组成.函数体既可 ...
- 'Error Domain=NSURLErrorDomain Code=-999' AFNetworking请求报错
早上请求app请求登录接口发现了下面的错误信息: Error Domain=NSURLErrorDomain Code=-999 "已取消" UserInfo={NSErrorFa ...
- NOIp 图论算法专题总结 (3)：网络流 & 二分图 简明讲义
系列索引: NOIp 图论算法专题总结 (1) NOIp 图论算法专题总结 (2) NOIp 图论算法专题总结 (3) 网络流 概念 1 容量网络(capacity network)是一个有向图,图的 ...
- Python Django 编写一个简易的后台管理工具2-创建项目
django-admin 创建项目 pycharm 创建项目