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 ...
随机推荐
- ASP.NET Core 6框架揭秘实例演示[11]：诊断跟踪的几种基本编程方式
在整个软件开发维护生命周期内,最难的不是如何将软件系统开发出来,而是在系统上线之后及时解决遇到的问题.一个好的程序员能够在系统出现问题之后马上定位错误的根源并找到正确的解决方案,一个更好的程序员能够根 ...
- Excel：替换表格中的0值
替换时需要勾选"单元格匹配",否则会把所有单元格中的0字符都给替换掉
- Python数据可视化 -- Wordcloud
Python数据可视化 -- Wordcloud 安装 启动命令行,输入:pip install wordcloud word cloud 库介绍 及简单使用 wordcloud库,可以说是pytho ...
- Kendo UI Grid 批量编辑使用总结
项目中使用Kendo UI Grid控件实现批量编辑,现在将用到的功能总结一下. 批量编辑基本设置 Kendo Grid的设置方法如下: $("#grid").kendoGrid( ...
- thinkphp 框架自带搜索+分页+搜索标红
..........控制器方法 public function index() { //接受搜索关键字 $word=input('word'); $where=[]; if (!empty($word ...
- PHP高并发商城秒杀
1.什么是秒杀 秒杀活动是一些购物平台推出的集中人气的活动,一般商品数量很少,价格很便宜,限定开始购买的时间,会在以秒为单位的时间内被购买一空.比如原价千元甚至万元的商品以一元的价格出售,但数量只有一 ...
- Dapr集成之GRPC 接口
Dapr 为本地调用实现 HTTP 和 gRPC API . 通常大家第一时间想到的是通过 gRPC 调用 Dapr,更重要的一点是Dapr 也可以通过 gRPC 与应用程序通信. 要做到这一点,原理 ...
- yum源出现 AppStream‘ 缓存失败，忽略这个 repo。同步仓库 ‘base‘ 缓存失败，忽略这个 repo 的问题解决办法
今天安装Wget时出现如下错误 到 /etc/yum.repos.d/目录下编辑CentOS-Base.repo ,更改为如下内容. vim CentOS-Base.repo # CentOS-Bas ...
- lgP6232题解
评蓝过分了吧,这题最多黄( 首先我们从挂钩的最上层向下走,假设这个挂杆的左边和右边一共有 \(k\) 件衣服. 若 \(k\) 是 \(2\) 的倍数,那么我们只能向左走(左边和右边的衣服一样多).反 ...
- ybt1130：找第一个只出现一次的字符
1130:找第一个只出现一次的字符 时间限制: 1000 ms 内存限制: 65536 KB提交数: 62333 通过数: 23786 [题目描述] 给定一个只包含小写字母的字 ...