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 ...
随机推荐
- 『德不孤』Pytest框架 — 4、Pytest跳过测试用例
目录 1.无条件跳过skip 2.有条件跳过skipif 3.练习 自动化测试执行过程中,我们常常出现这种情况:因为功能阻塞,未实现或者环境有问题等等原因,一些用例执行不了, 如果我们注释掉或删除掉这 ...
- Meterpreter后渗透阶段之远程桌面开启
实验目的 学习利用Meterpreter后渗透阶段模块来开启靶机远程桌面 实验原理 利用Meterpreter生成木马,利用木马控制靶机进行远程桌面的攻击 实验内容 利用Meterpreter后渗透阶 ...
- RENIX报文两个字段嵌套变化——网络测试仪实操
RENIX软件如何实现报文中两个字段嵌套变化,以下为您实操讲解详细步骤. 1.打开Renix软件,连接机框并预约测试端口: 2.创建一条RAW流量(Binding流量也可以,这里用RAW流做例子) 3 ...
- vs2019 NuGet安装及简单使用
Nuget介绍 官网定义:NuGet是.NET的软件包管理器(免费).NuGet客户端工具提供了生成和使用软件包的能力.NuGet Gallery 是所有软件包作者和消费者都使用的中央软件包存储库. ...
- Python实现JSON序列化和反序列化
在我的应用中,序列化就是把类转成符合JSON格式的字符串,反序列化就是把JSON格式的字符串转换成类.C#的话直接用Newtonsoft.JSON就可以了,非常好用.本来以为python也会有类似的库 ...
- win7下安装docker toolbox
我的笔记本是win10系统,上面安装docker非常简单.只要在官网下载然后一路next就可以了.然而办公室的电脑装的是win7,我也懒得给它换win10.没想到,win7下安装docker这么费劲. ...
- JAVA只要掌握内部类,多继承和单继承都不是问题
摘要:如果实现java的多继承,其实很简单,关键是对于内部类的特征的掌握,内部类可以继承一个与外部类无关的类,保证了内部类天然独立性,根据这个特性从而实现一个类可以继承多个类的效果. 本文分享自华为云 ...
- Spring 5 , 狭义上的spring 以及 广义上的spring , spring 设计模式
Spring 5 距离 Spring4 发布有4年多, 所以说Spring 5是一个重要的版本 要构建和运行Spring 5应用程序, 至少需要Java EE 7 和JDK 8 , 之前的JDK和Ja ...
- 【阅读SpringMVC源码】手把手带你debug验证SpringMVC执行流程
✿ 阅读源码思路: 先跳过非重点,深入每个方法,进入的时候可以把整个可以理一下方法的执行步骤理一下,也可以,理到某一步,继续深入,回来后,接着理清除下面的步骤. ✿ 阅读本文的准备工作,预习一下Spr ...
- redis存储token
redis存储token 欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章http://www.javaman.cn/sb2/redis-token 在实际开发中,token需要保 ...