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中有合并单元格的情况,合并的单元格只能取到第一个单元格的值,合并的单元格后面的单元格内容的值为空,针对这个情况,写了下面一段代码实现, 对单元格进行判断,如果是传入的索引是合并单元 ...
- spring--启用注解功能
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:p="http://www.spr ...
- spring 与java EE
javaEE 和 j2EE一样吗? javaEE (java platform Enterprise Edition) 1999年,Sun公司将java分为3个版本,即 标准版(J2SE) , 企业 ...
- python 中的迭代器和生成器简单介绍
可迭代对象和迭代器 迭代(iterate)意味着重复,就像 for 循环迭代序列和字典那样,但实际上也可使用 for 循环迭代其他对象:实现了方法 __iter__ 的对象(迭代器协议的基础). __ ...
- WPF优秀组件推荐之Stylet（一）
一.简介 Stylet是基于WPF的一款MVVM组件,虽然WPF本身是自带MVVM功能的,但实现起来不是很方便 ,通过Stylet,用户可以用很少的代码就能享受MVVM带来的舒适体验. 目前Style ...
- 简单聊一聊Javascript中的模块化
在面试中只要说到模块化的问题,多多少少总会问到这些,umd.amd.cjs.esm,可能听过其中一个两个,或者都听说过.接下来我们先简单了解一下他们到底是什么,又有什么样的区别呢. 最开始的时候,Ja ...
- 七天接手react项目-起步
七天接手react项目-起步 背景 假如七天后必须接手一个 react 项目(spug - 一个开源运维平台),而笔者只会 vue,之前没有接触过 react,此刻能做的就是立刻展开一个"7 ...
- 手写 Vue 系列 之 Vue1.x
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
- RhaPHP 微信公众号管理系统
框架网址https://www.rhaphp.com/ 开发手册网址:: https://www.kancloud.cn/langleigelang/rhaphp/588488 git 克隆,如果克隆 ...
- laravel 7 xlsx 数据导入至 数据库
网址: https://learnku.com/articles/32400 1:安装插件 环境要求 PHP: ^7.0 Laravel: ^5.5 安装方式 composer require maa ...