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 ...
随机推荐
- python-利用xlrd模块中读取有合并单元格的excel数据
前言 对于excel中有合并单元格的情况,合并的单元格只能取到第一个单元格的值,合并的单元格后面的单元格内容的值为空,针对这个情况,写了下面一段代码实现, 对单元格进行判断,如果是传入的索引是合并单元 ...
- node / npm安装、启动报错
1. 系统禁止运行脚本 a. 在系统中找到Windos PowerShell[可以按win健,然后搜powershell]--以管理员身份打开 b. 在打开的窗口输入set-ExecutionPoli ...
- 智能化管理工具：商业智能BI
BI(商业智能)是在ERP等信息化管理工具的基础上提出的,是基于信息技术构建的智能化管理工具,它实时地对ERP.CRM.SCM等管理工具生成的企业数据进行各种分析,并给出报告,帮助管理者认识企业和市 ...
- kubernetes用户使用token安全认证教程
kubernetes server account的token很容易获取,但是User的token非常麻烦,本文给出一个极简的User token生成方式,让用户可以一个http请求就能获取到. to ...
- CVE-2022-22947 Spring Cloud Gateway SPEL RCE复现
目录 0 环境搭建 1 漏洞触发点 2 构建poc 3 总结 参考 0 环境搭建 影响范围: Spring Cloud Gateway 3.1.x < 3.1.1 Spring Cloud Ga ...
- git问题：gpg failed to sign the data fatal: failed to write commit object问题
今天用版本控制工具git提交时一直出现的问题:gpg failed to sign the data fatal: failed to write commit object, gpg是一个加密软件 ...
- Java课程设计---添加学生
1.创建添加窗体 package com.student.view; import java.awt.EventQueue; import javax.swing.ButtonGroup; impor ...
- 面向对象编程(C++篇2)——构造
目录 1. 引述 2. 详述 2.1. 数据类型初始化 2.2. 类初始化 1. 引述 在C++中,学习类的第一课往往就是构造函数.根据构造函数的定义,构造函数式是用于初始化类对象的数据成员的.无论何 ...
- hexo部署到github时，提示typeError [ERR_INVALID_ARG_TYPE] The “mode“ argument must be integer. Receive
hexo部署到github时,提示typeError [ERR_INVALID_ARG_TYPE]: The "mode" argument must be integer. Re ...
- 树莓派4B安装 百度飞桨paddlelite 做视频检测 （一、环境安装）
前言: 当前准备重新在树莓派4B8G 上面搭载训练模型进行识别检测,训练采用了百度飞桨的PaddleX再也不用为训练部署环境各种报错发愁了,推荐大家使用. 关于在树莓派4B上面paddlelite的文 ...