jQuery--文档处理案例
需求
如上图，实现左右两边的选择菜单可以左右移动，‘>’按钮一次只能移动被选中的一个菜单，‘>>’按钮一次移动所有被选择的菜单，‘>>>’按钮
将所有菜单进行移动，不管是否被选择。
代码实现
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
7 <script type="text/javascript">
8 $(function(){
9 $("#left1").click(function(){
10 $("#leftSelectId option:selected:first").removeAttr("selected").appendTo($("#rightSelectId"));
11 });
12 $("#left2").click(function(){
13 $("#leftSelectId option:selected").removeAttr("selected").appendTo($("#rightSelectId"));
14 });
15 $("#left3").click(function(){
16 $("#leftSelectId option").removeAttr("selected").appendTo($("#rightSelectId"));
17 });
18
19 $("#right1").click(function(){
20 $("#rightSelectId option:selected:first").removeAttr("selected").appendTo($("#leftSelectId"));
21 });
22 $("#right2").click(function(){
23 $("#rightSelectId option:selected").removeAttr("selected").appendTo($("#leftSelectId"));
24 });
25 $("#right3").click(function(){
26 $("#rightSelectId option").removeAttr("selected").appendTo($("#leftSelectId"));
27 });
28 });
29 </script>
30
31 <style type="text/css">
32 .textClass {
33 background-color: #ff0000;
34 }
35 </style>
36 </head>
37 <body>
38 <table>
39 <tr>
40 <td>
41 <select id="leftSelectId" style="width:100px" multiple="multiple" size="6">
42 <option>京东商城</option>
43 <option>苏宁易购</option>
44 <option>淘宝</option>
45 <option>拼多多</option>
46 </select>
47
48 </td>
49 <td>
50 <input id="left1" type="button" value=">" style="width:50px"/> <br/>
51 <input id="left2" type="button" value=">>" style="width:50px"/> <br/>
52 <input id="left3" type="button" value=">>>" style="width:50px"/> <br/>
53
54 <input type="button" id="right1" value="<" style="width:50px"/> <br/>
55 <input type="button" id="right2" value="<<" style="width:50px"/> <br/>
56 <input type="button" id="right3" value="<<<" style="width:50px"/> <br/>
57
58 </td>
59 <td>
60 <select id="rightSelectId" style="width:100px" multiple="multiple" size="6">
61 </select>
62
63 </td>
64 </tr>
65 </table>
66
67 </body>
68 </html>
jQuery--文档处理案例的更多相关文章
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- jQuery文档加载完毕的几种写法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- jQuery 文档操作方法
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
- jQuery文档操作方法对比和src写法
jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- jQuery文档就绪事件
[jQuery文档就绪事件] 为了防止文档在完全加载(就绪)之前运行 jQuery 代码.如果在文档没有完全加载之前就运行函数,操作可能失败. $(document).ready(function() ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- jquery文档加载几种写法，图片加载写法
jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...
- jQuery 文档操作 - prependTo() ，appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
- HTML jQuery 文档操作 - html() 方法
jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...
随机推荐
- 100G/40G/25G/10G网络测试解决方案
一.100G概述 随着CDN等视频直播业务和P2P业务的快速发展,带宽的要求越来越高.当前5G业务势头正盛,其基于400G的主干网络通信业务也在积极部署之中.但当前在很多的业务场景中,100G系统的部 ...
- 还在用Excel做数据分析？别人都在用数据分析工具啦！
"Excel在过去.现在和未来都是一个无比优秀和天才的工具,无数虔诚的信徒将其奉为唯一的法门,而我却并不在其中了." 作为一个数据分析师,Excel是我入门必备的数据分析工具,虽然 ...
- 库存数量管理方案一：基于SQL存储过程和MERGE（结合活字格案例）
库存更新是ERP系统的基本功能,一般包括以下动作:1.以库位编号和商品编号查询库存表,如果查询不到,则添加一行库存信息,如:(出入库)库位编号/(出入库)商品编号/(出入库)+或-数量2.以库位编号和 ...
- 【C#特性】 Attribute 特性
msdn:https://docs.microsoft.com/zh-cn/dotnet/csharp/programming-guide/concepts/attributes/creating-c ...
- Java基础--Eclipse关联Java源码
打开Eclipse,Window->Preferences->Java 点Edit按钮后弹出: 点Source Attachment后弹出: 选择Java安装路径下的src.zip文件即可 ...
- AHUACM寒假集训I（基础数据结构+串串）
H.超级钢琴 luoguP2048 题目大意: 求出一个长N序列中所有长度在L到R的子序列中序列和最大的K个,并求这K个的和 思路: 暴力的话可以求出所有满足要求的子序列然后排序,然后显然会T. 所以 ...
- QT：Qt Creator中创建的各种项目说明
Qt Widgets Application:支持桌面平台GUI的应用程序.GUI的设计完全基于C++,采用Qt提供的一套C++类库: Qt Console Application:控制台应用程序,无 ...
- 【Azure API 管理】使用APIM进行XML内容读取时遇见的诡异错误 Expression evaluation failed. Object reference not set to an instance of an object.
问题描述 使用APIM,在 Inbound 中对请求的Body内容进行解析.客户端请求所传递的Request Body为XML格式,需要从Request Body中解析出多个(Element)节点值, ...
- 关于Union和 Union all，以及出现 ORA-12704:字符集不匹配问题
一.Union和 Union all 1.Union 对两个结果集进行并集操作: 对结果进行去重操作,不包括重复行: 并进行默认排序. -----效率相对较低 2.Union all 对两个结果集进行 ...
- SQL从零到迅速精通【数据库应用】
数据库理论的研究主要集中于关系规范化理论和关系数据理论等.数据库技术与计算机技术的结合使得数据库中新的技术层出不穷.最初的数据库系统主要应用于银行管理.飞机订票等事务处理环境.后来渐渐应用于工程设计与 ...