专栏首页别先生jQuery实现左移右移

jQuery实现左移右移

 1 <html>
 2 <head>
 3 <meta charset="utf-8">
 4 <title>完成左移右移</title>
 5 <script src="jquery.js"></script>
 6 <style type="text/css">
 7     table{background-color:purple;}
 8     input{background-color:blue;}
 9 </style>
10 <script language="javascript">
11     $("document").ready(function(){
12         $("#b1").click(function(){
13             var v1=$("#k1").find("option:selected").text();
14             if(v1!=null){
15                 $("#k2").append("<option value=''>"+v1+"</option>");
16                 $("#k1 option:selected").remove()
17             }    
18         });    
19         
20         $("#b2").click(function(){
21             var v2=$("#k2").find("option:selected").text();
22             if(v2!=null){
23                 $("#k1").append("<option value=''>"+v2+"</option>");
24                 $("#k2 option:selected").remove();
25             }
26         });
27     });
28 </script>    
29 </head>
30 <body>
31 <form action="#" method="post">
32 <table>
33     <tr>
34         <td>
35             <select id="k1" size="10" style="width:200px;">
36                 <option id="p1">柠檬学院</option>
37                 <option id="p2">柠檬学员</option>
38                 <option id="p3">柠檬人</option>
39             </select>
40         </td>
41         <td>
42             <input type="button" id="b1" value=">>"/>
43             <input type="button" id="b2" value="<<"/>        
44         </td>
45         <td>
46             <select id="k2" size="10" style="width:200px;">
47                 <option>李哥</option>                
48             </select>
49         </td>
50     </tr>
51 </table>
52 </form>    
53 </body>
54 </html>
 1 <html>
 2 <head>
 3 <meta charset="utf-8">
 4 <title>完成左移右移</title>
 5 <script src="jquery.js"></script>
 6 <style type="text/css">
 7     table{background-color:purple;}
 8     input{background-color:yellow;}
 9 </style>
10 <script language="javascript">
11     $(document).ready(function(){
12         $("#b1").click(function(){
13             $("#k2").append($("#k1 option:selected"));
14         });
15         
16         $("#b2").click(function(){
17             $("#k1").append($("#k2 option:selected"));
18         });
19         
20         $("#b3").click(function(){
21             $("#k2").append($("#k1 option"));
22         });
23         
24         $("#b4").click(function(){
25             $("#k1").append($("#k2 option"));
26         });
27         
28         $("#add0").click(function(){
29             var a=$("#add").val();
30             $("#k1").append("<option value="+a+0+">"+a+"</option>");
31             $("#add").val("");
32         });
33     });
34 </script>    
35 </head>
36 <body>
37 <form action="#" method="post">
38 <table>
39     <tr>
40         <td>
41             <select id="k1" size="10" style="width:200px;">
42                 <option value="Ning1" id="p1">柠檬学院</option>
43                 <option value="Ning2" id="p2">柠檬学员</option>
44                 <option value="Ning3" id="p3">柠檬人</option>
45             </select>
46         </td>
47         <td>
48             <input type="button" id="b1" value=">>"/>
49             <input type="button" id="b3" value="==>>"/><br/>
50             <input type="button" id="b2" value="<<"/>
51             <input type="button" id="b4" value="<<=="/>
52                 
53         </td>
54         <td>
55             <select id="k2" value="Ning4" size="10" style="width:200px;">
56                 <option>李哥</option>                
57             </select>
58         </td>
59     </tr>
60 </table>
61 </form>    
62 内容:<input type="text" id="add"/>
63       <input type="button" value="添加" id="add0"/>
64 
65 
66 </body>
67 </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • kafka单节点的安装,部署,使用

    1、kafka官网:http://kafka.apache.org/downloads

    别先生
  • Ajax和JSON完成二级菜单联动的功能

    首先需要找好JSON的包哦:   链接:http://pan.baidu.com/s/1jH6gN46 密码:lbh1 1:首先创建一个前台页面,比如seco...

    别先生
  • HTML+CSS提升小实战

    1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; ch...

    别先生
  • kafka安装与测试

    Producer即生产者,向Kafka集群发送消息,在发送消息之前,会对消息进行分类,即Topic, Topic即主题,通过对消息指定主题可以将消息分类,消费...

    瑾诺学长
  • 如何检测NVIDIA Jetson TX2硬件温度

    2.输入以下指令查看温度,以下数字分别对应以上硬件,将数字除以1000得出实际温度(摄氏度)

    GPUS Lady
  • MySQL中null值的一个小坑

    今天在测试null值的时候,发现了一个小问题,记录在这里,不知道大家以前遇到过没。

    AsiaYe
  • jquery操作select(取值,设置选中)

    程序员同行者
  • mybatis学习之动态sql

    mybatis的动态sql语句很强大,在mapper映射文件中使用简单的标签即可实现该效果,下面一个个记录: 1、select查询 简单的select类似如下:...

    用户1141560
  • Kubernetes里的ConfigMap的用途

    顾名思义,ConfigMap用于保存配置数据的键值对,可以用来保存单个属性,也可以用来保存配置文件。

    Jerry Wang
  • Css3 Animation 动画十二原则

    作为前端的设计师和工程师,我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画,但我们经常做的不过如此。

    grain先森

扫码关注云+社区

领取腾讯云代金券