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 ...
随机推荐
- 设置intellij IDEA编辑框背景色
首先是打开idea开发工具,然后点击左上角的File,选择Settings设置 应用即时生效,无需重启idea
- XSS漏洞基础
什么是XSS? XSS全程Cross-site scripting,跨站脚本攻击.恶意攻击者往Web页面里插入html代码,当用户浏览该页之时,嵌入其中Web里面的html代码会被执行,从而达到恶意用 ...
- 企业级Web服务器安全主动防御措施
篇一 : 企业级Web服务器安全主动防御措施 Web服务器现在已经成为了病毒.木马的重灾区.不但企业的门户网站被篡改.资料被窃取,而且还成为了病毒与木马的传播者.有些Web管理员采取了一些措施,虽然可 ...
- php strtolower()函数 语法
php strtolower()函数 语法 作用:把所有字符转换为小写.大理石量具 语法:strtolower(string) 参数: 参数 描述 string 必须,规定要转换的字符串 说明:str ...
- thinkphp 配置格式
ThinkPHP支持多种格式的配置格式,但最终都是解析为PHP数组的方式. PHP数组定义 返回PHP数组的方式是默认的配置定义格式,例如: //项目配置文件 return [ // 默认模块名 'd ...
- 【BZOJ3756】Pty的字符串（广义后缀自动机）
题意: 思路:论文题 建立Trie树的后缀自动机需要换这个长的板子 #include<bits/stdc++.h> using namespace std; typedef long lo ...
- 使用C#登录带验证码的网站
我在上一篇文章中已经讲解了一般网站的登录原来和C#的登录实现,很多人问到对于使用了验证码的网站该怎么办,这里我就讲讲验证码的原理和对应的登录方法.验证码的由来几年前,大部分网站.论坛之类的是没有验证码 ...
- 从Java future 到 Guava ListenableFuture实现异步调用
从Java future 到 Guava ListenableFuture实现异步调用 置顶 2016年04月24日 09:11:14 皮斯特劳沃 阅读数:17570 标签: java异步调用线程非阻 ...
- static、final修饰的变量和方法能否被继承的问题
首先定义父类和子类 public class Parent { protected static String a = "static"; final String b = &qu ...
- linux: 如何查看端口占用？
查看端口占用 $: netstat -anp | grep 8888 tcp 0 0 127.0.0.1:8888 0.0.0.0:* LISTEN 13404/python3 tcp 0 1 172 ...