jQuery--文档处理案例

Posted jxxblogs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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代码片段

JQuery02

jQuery文档就绪

JQuery中Ajax详细参数使用案例

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升