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 ...
随机推荐
- 亲测可用的golang sql例程与包管理
sqlite与golang package main import ( "database/sql" "fmt" "time" _ &quo ...
- css 文字对齐
// html <div>姓名</div> <div>手机号码</div> <div>账号</div> <div>密 ...
- LOJ6435 PKUSC2018 星际穿越
这个题吧当时在考场只得了45分 然后70分的性质都分析到了 不知道为啥就是写萎蛋了 哎 当时还是too young too simple 看了一下julao们的博客这个题有两种做法 一个是比较费脑子的 ...
- Install packages failed: Installing packages: error occurred. ------简单的问题常常会被忽略
用 pip install 安装了wxpy这个库,但是使用的时候却报错:ImportError: No module named wxpy 我先用 pip list 查看了一下,发现这个库是已经存在的 ...
- Python基础教程（021）--Pycharm简介
前言 学习Pycharm开发工具 内容 项目:就是一个功能复杂的软件 目标 必须掌握的工具
- CSS-美化checkbox
注意:css3 的用: checked 伪类选择器会去检查元素属性(`input[checked]`),而不是 dom 节点上的属性( ``).所以要使用 jquery 的 prop 而非 attr ...
- cnn模型
https://blog.csdn.net/qq_26591517/article/details/79805884
- 用 Flask 来写个轻博客 (36) — 使用 Flask-RESTful 来构建 RESTful API 之五
目录 目录 前文列表 PUT 请求 DELETE 请求 测试 对一条已经存在的 posts 记录进行 update 操作 删除一条记录 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 ...
- Java学习之Thread方法
一.sleep()方法:在同步中,释放CPU执行权,不释放同步锁,意味着程序停止 二.停止线程方法:原理:run执行完成 1.设置标记 class StopThread implements Runn ...
- 第一步：卸载手机上的“WIFI万能钥匙”！ 会分享自己家的wifi
http://www.znds.com/tv-164866-1-1.html 楼主今日家中WIFI卡的不行,心想,20M的电信光纤没理由这么卡!于是就在网上查找了许多资料,接下来统一收集整理给大家!第 ...