两种方法使用jquery实现左右移动效果(包含each遍历方式)

原创 2012年03月21日 21:29:42

 第一种:使用each()遍历方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery实现左右选择器</title>

</head>

<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>

<script language="javascript" type="text/javascript">

      

   $(document).ready(function (){

    //遍历元素

          $("option").each(function (index,domEle){

                

                 $(domEle).click(function (){

                         conStr=$(this);

                         $("#right").click(function (){

                         conStr.appendTo(".right"); 

                           

                });

                           

                      

                      $("#left").click(function (){

                         conStr.appendTo(".left");  

                           

                });  

                 });

        

                      

                 });

         

          });

 

 

</script>

 

<body>

<table width="200" border="0">

<caption>选项卡</caption>

  <tr>

    <td><select multiple="multiple" class="left" style="width:100px; height:200px">

              <option>苹果</option>

              <option>香蕉</option>

              <option>草莓</option>

              <option></option>

       </select>

       </td>

       <td align="center">

       <input type="button" value="向右" id="right"><br><br>

       <input type="button" value="向左" id="left"><br><br>

       </td>

    <td><select multiple="multiple" class="right" style="width:100px; height:200px"></select></td>

  </tr>

</table>

</body>

</html>

第二种:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery实现左右选择器</title>

</head>

<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>

<script language="javascript" type="text/javascript">

   $(document).ready(function (){

         

          //给向右按钮添加onclick事件

                 $("#right").click(function (){

                          //选中目标元素追加到左边

                             $(".left option:selected").appendTo(".right");

                             

                        });

                       //给向左按钮添加onclick事件

                  $("#left").click(function (){

                           //选中目标元素追加到右边

                             $(".right option:selected").appendTo(".left");

                             

                        });

                

               

          });

 

 

</script>

 

<body>

<table width="200" border="0">

<caption>选项卡</caption>

  <tr>

    <td><select multiple="multiple" class="left" style="width:100px; height:200px">

              <option>苹果</option>

              <option>香蕉</option>

              <option>草莓</option>

              <option></option>

       </select>

       </td>

       <td align="center">

       <input type="button" value="向右" id="right"><br><br>

       <input type="button" value="向左" id="left"><br><br>

       </td>

    <td><select multiple="multiple" class="right" style="width:100px; height:200px"></select></td>

  </tr>

</table>

</body>

</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

jQuery实现选项内容的左右移动效果

无标题文档 $(document).ready(function (){ //为添加按钮增加事件 $("#leftbtn").click(function (){ ...

两种方法基于jQuery实现IE浏览器兼容placeholder效果【转】

文章出处:两种方法基于jQuery实现IE浏览器兼容placeholder效果 placeholder是HTML5的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

两种方法基于jQuery实现IE浏览器兼容placeholder效果

placeholder是HTML5的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果: 在Chrome( v31.0.1650.63 m)、Firefox( v...

JavaScript专题之jQuery通用遍历方法each的实现

JavaScript专题之jQuery通用遍历方法each的实现 JavaScript 专题系列第十一篇,讲解 jQuery 通用遍历方法 each 的实现 each介绍 jQu...

jquery实现select多选框的左右移动

无标题文档 /**  *动态的给左边的下拉列表创建选项  *具体情况可以从数据库读取数据动态创建选项  */ $(document).ready(function(){  ...

jquery实现下拉框内容左右移动

每天来看一下。博客写了没人看委屈,还是要坚持继续写下去呀,留着自己看哈 如题,下面先来说一下jquery实现下拉框中的内容左右移动的思路(个人理解) jquery代码(不考虑静态页面)先来...

jquery实现左右上下移动

最近再做报表时候,直接把全部字段都导出了,但这不太灵活。回忆老师讲过的项目做报表如下左右上下移功能灵活控制,所以就尝试下咯。 js代码 function selected(thiz) { v...

jquery实现可以左右选择的下拉菜单效果

可以左右选择的下拉菜单效果 //使用jquery加载事件 $(document).ready(function (){ /************************...

jquery实现左右条幅广告效果

左右条幅广告 .ad-left{ background-image:url(couplet_left.gif); borde...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)