码迷，mamicode.com
首页 > 移动开发 > 详细

转载：（jQuery上下左右移动）

时间：2017-06-01 10:15:49      阅读：296      评论：0      收藏：0      [点我收藏+]

标签：mon   选择排序   value   左右移动   ima   rem   tip   mono   gre   

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
<HEAD>  
<TITLE> Select Demo </TITLE>  
<META NAME="Generator" CONTENT="EditPlus">  
<META NAME="Author" CONTENT="">  
<META NAME="Keywords" CONTENT="">  
<META NAME="Description" CONTENT="">  
</HEAD>  
<style>  
    center  
    {  
        font-size:12px;  
        color:red;  
        font-weight:bold;  
    }  
    select  
    {  
        font-size:12px;  
        color:green;  
    }  
</style>  
  
<BODY>  
    <span id=‘feedback‘></span>  
      
    <form method="post" name="myform">  
  <table border="0" width="400">  
 <tr>  
  <td><CENTER>可选择排序方式</CENTER></td>  
  <td> </td>  
  <td><CENTER>已选择排序方式</CENTER></td>  
 </tr>  
    <tr>  
      <td width="40%">  
  <select  multiple name="left" id="left" size="8" style=‘width:200;‘  
  ondblclick="moveOption(document.getElementById(‘left‘), document.getElementById(‘right‘))">  
       <option value="20">测试数据一</option>  
       <option value="30">测试数据二</option>  
       <option value="40">测试数据三</option>  
       <option value="50">测试数据四</option>  
       <option value="60">测试数据五</option>  
       <option value="70">测试数据六</option>    
       <option value="80">测试数据七</option>  
       <option value="90">测试数据八</option>    
  </select>  
   </td>  
      <td width="20%" align="center">  
  <input type="button" value=" >> " onclick="moveOption(document.getElementById(‘left‘),document.getElementById(‘right‘))"><br><br>  
  <input type="button" value=" << " onclick="moveOption(document.getElementById(‘right‘), document.getElementById(‘left‘))">  
   </td>  
      <td width="40%">  
  <select  multiple name="right" id="right" size="8" style=‘width:200;‘  
  ondblclick="moveOption(document.getElementById(‘right‘), document.getElementById(‘left‘))">  
  </select>  
   </td>  
    </tr>  
 <tr>  
  <td colspan="3">  
  <CENTER>  
  <INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById(‘right‘));">  
  <INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById(‘right‘));">  
  <INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById(‘right‘));">  
  <INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById(‘right‘));">  
  </CENTER></td>  
 </tr>  
  </table>  
      
   
</BODY>  
</HTML>  
  
  
<SCRIPT LANGUAGE="JavaScript">  
<!--  
    //上移  
　   function moveUp(obj)  
　　{　  
　　　　　　for(var i=1; i < obj.length; i++)  
　　　　　　{//最上面的一个不需要移动，所以直接从i=1开始  
　　　　　　　　if(obj.options[i].selected)  
　　　　　　　　{  
　　　　　　　　　　if(!obj.options.item(i-1).selected)  
　　　　　　　　　　{  
　　　　　　　　　　　　var selText = obj.options[i].text;  
　　　　　　　　　　　　var selValue = obj.options[i].value;  
                        obj.options[i].text = obj.options[i-1].text;  
                        obj.options[i].value = obj.options[i-1].value;  
                        obj.options[i].selected = false;  
                        obj.options[i-1].text = selText;  
                        obj.options[i-1].value = selValue;  
                        obj.options[i-1].selected=true;  
　　　　　　　　　　}  
　　　　　　　　}  
　　　　　　}  
　　　　}  
  
        //下移  
        function moveDown(obj)  
　　　　{  
　　　　　　for(var i = obj.length -2 ; i >= 0; i--)  
　　　　　　{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始  
　　　　　　　　if(obj.options[i].selected)  
　　　　　　　　{  
　　　　　　　　　　if(!obj.options[i+1].selected)  
　　　　　　　　　　{  
　　　　　　　　　　　　var selText = obj.options[i].text;  
　　　　　　　　　　　　var selValue = obj.options[i].value;  
            obj.options[i].text = obj.options[i+1].text;  
            obj.options[i].value = obj.options[i+1].value;  
           obj.options[i].selected = false;  
          obj.options[i+1].text = selText;  
          obj.options[i+1].value = selValue;  
         obj.options[i+1].selected=true;  
　　　　　　　　　　}  
　　　　　　　　}  
　　　　　　}  
　　　　}  
        //移动  
        function moveOption(obj1, obj2)  
        {  
             for(var i = obj1.options.length - 1 ; i >= 0 ; i--)  
             {  
                 if(obj1.options[i].selected)  
                 {  
                    var opt = new Option(obj1.options[i].text,obj1.options[i].value);  
                    opt.selected = true;  
                    obj2.options.add(opt);  
                    obj1.remove(i);  
                }  
             }  
        }  
        //置顶  
      function  moveTop(obj)   
      {   
            var  opts = [];   
            for(var i =obj.options.length -1 ; i >= 0; i--)  
            {  
                if(obj.options[i].selected)  
                {  
                    opts.push(obj.options[i]);  
                    obj.remove(i);  
                }  
            }  
            var index = 0 ;  
            for(var t = opts.length-1 ; t>=0 ; t--)  
            {  
                var opt = new Option(opts[t].text,opts[t].value);  
                opt.selected = true;  
                obj.options.add(opt, index++);  
            }  
        }   
      //置底  
      function  moveBottom(obj)   
      {   
            var  opts = [];   
            for(var i =obj.options.length -1 ; i >= 0; i--)  
            {  
                if(obj.options[i].selected)  
                {  
                    opts.push(obj.options[i]);  
                    obj.remove(i);  
                }  
            }  
             for(var t = opts.length-1 ; t>=0 ; t--)  
            {  
                var opt = new Option(opts[t].text,opts[t].value);  
                opt.selected = true;  
                obj.options.add(opt);  
            }  
        }   
  
    //-->  
</SCRIPT>

技术分享

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <HEAD>  
  4. <TITLE> Select Demo </TITLE>  
  5. <META NAME="Generator" CONTENT="EditPlus">  
  6. <META NAME="Author" CONTENT="">  
  7. <META NAME="Keywords" CONTENT="">  
  8. <META NAME="Description" CONTENT="">  
  9. </HEAD>  
  10. <style>  
  11.     center  
  12.     {  
  13.         font-size:12px;  
  14.         color:red;  
  15.         font-weight:bold;  
  16.     }  
  17.     select  
  18.     {  
  19.         font-size:12px;  
  20.         color:green;  
  21.     }  
  22. </style>  
  23.   
  24. <BODY>  
  25.     <span id=‘feedback‘></span>  
  26.       
  27.     <form method="post" name="myform">  
  28.   <table border="0" width="400">  
  29.  <tr>  
  30.   <td><CENTER>可选择排序方式</CENTER></td>  
  31.   <td> </td>  
  32.   <td><CENTER>已选择排序方式</CENTER></td>  
  33.  </tr>  
  34.     <tr>  
  35.       <td width="40%">  
  36.   <select  multiple name="left" id="left" size="8" style=‘width:200;‘  
  37.   ondblclick="moveOption(document.getElementById(‘left‘), document.getElementById(‘right‘))">  
  38.        <option value="20">测试数据一</option>  
  39.        <option value="30">测试数据二</option>  
  40.        <option value="40">测试数据三</option>  
  41.        <option value="50">测试数据四</option>  
  42.        <option value="60">测试数据五</option>  
  43.        <option value="70">测试数据六</option>    
  44.        <option value="80">测试数据七</option>  
  45.        <option value="90">测试数据八</option>    
  46.   </select>  
  47.    </td>  
  48.       <td width="20%" align="center">  
  49.   <input type="button" value=" >> " onclick="moveOption(document.getElementById(‘left‘),document.getElementById(‘right‘))"><br><br>  
  50.   <input type="button" value=" << " onclick="moveOption(document.getElementById(‘right‘), document.getElementById(‘left‘))">  
  51.    </td>  
  52.       <td width="40%">  
  53.   <select  multiple name="right" id="right" size="8" style=‘width:200;‘  
  54.   ondblclick="moveOption(document.getElementById(‘right‘), document.getElementById(‘left‘))">  
  55.   </select>  
  56.    </td>  
  57.     </tr>  
  58.  <tr>  
  59.   <td colspan="3">  
  60.   <CENTER>  
  61.   <INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById(‘right‘));">  
  62.   <INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById(‘right‘));">  
  63.   <INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById(‘right‘));">  
  64.   <INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById(‘right‘));">  
  65.   </CENTER></td>  
  66.  </tr>  
  67.   </table>  
  68.       
  69.    
  70. </BODY>  
  71. </HTML>  
  72.   
  73.   
  74. <SCRIPT LANGUAGE="JavaScript">  
  75. <!--  
  76.     //上移  
  77. 　   function moveUp(obj)  
  78. 　　{　  
  79. 　　　　　　for(var i=1; i < obj.length; i++)  
  80. 　　　　　　{//最上面的一个不需要移动，所以直接从i=1开始  
  81. 　　　　　　　　if(obj.options[i].selected)  
  82. 　　　　　　　　{  
  83. 　　　　　　　　　　if(!obj.options.item(i-1).selected)  
  84. 　　　　　　　　　　{  
  85. 　　　　　　　　　　　　var selText = obj.options[i].text;  
  86. 　　　　　　　　　　　　var selValue = obj.options[i].value;  
  87.                         obj.options[i].text = obj.options[i-1].text;  
  88.                         obj.options[i].value = obj.options[i-1].value;  
  89.                         obj.options[i].selected = false;  
  90.                         obj.options[i-1].text = selText;  
  91.                         obj.options[i-1].value = selValue;  
  92.                         obj.options[i-1].selected=true;  
  93. 　　　　　　　　　　}  
  94. 　　　　　　　　}  
  95. 　　　　　　}  
  96. 　　　　}  
  97.   
  98.         //下移  
  99.         function moveDown(obj)  
  100. 　　　　{  
  101. 　　　　　　for(var i = obj.length -2 ; i >= 0; i--)  
  102. 　　　　　　{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始  
  103. 　　　　　　　　if(obj.options[i].selected)  
  104. 　　　　　　　　{  
  105. 　　　　　　　　　　if(!obj.options[i+1].selected)  
  106. 　　　　　　　　　　{  
  107. 　　　　　　　　　　　　var selText = obj.options[i].text;  
  108. 　　　　　　　　　　　　var selValue = obj.options[i].value;  
  109.             obj.options[i].text = obj.options[i+1].text;  
  110.             obj.options[i].value = obj.options[i+1].value;  
  111.            obj.options[i].selected = false;  
  112.           obj.options[i+1].text = selText;  
  113.           obj.options[i+1].value = selValue;  
  114.          obj.options[i+1].selected=true;  
  115. 　　　　　　　　　　}  
  116. 　　　　　　　　}  
  117. 　　　　　　}  
  118. 　　　　}  
  119.         //移动  
  120.         function moveOption(obj1, obj2)  
  121.         {  
  122.              for(var i = obj1.options.length - 1 ; i >= 0 ; i--)  
  123.              {  
  124.                  if(obj1.options[i].selected)  
  125.                  {  
  126.                     var opt = new Option(obj1.options[i].text,obj1.options[i].value);  
  127.                     opt.selected = true;  
  128.                     obj2.options.add(opt);  
  129.                     obj1.remove(i);  
  130.                 }  
  131.              }  
  132.         }  
  133.         //置顶  
  134.       function  moveTop(obj)   
  135.       {   
  136.             var  opts = [];   
  137.             for(var i =obj.options.length -1 ; i >= 0; i--)  
  138.             {  
  139.                 if(obj.options[i].selected)  
  140.                 {  
  141.                     opts.push(obj.options[i]);  
  142.                     obj.remove(i);  
  143.                 }  
  144.             }  
  145.             var index = 0 ;  
  146.             for(var t = opts.length-1 ; t>=0 ; t--)  
  147.             {  
  148.                 var opt = new Option(opts[t].text,opts[t].value);  
  149.                 opt.selected = true;  
  150.                 obj.options.add(opt, index++);  
  151.             }  
  152.         }   
  153.       //置底  
  154.       function  moveBottom(obj)   
  155.       {   
  156.             var  opts = [];   
  157.             for(var i =obj.options.length -1 ; i >= 0; i--)  
  158.             {  
  159.                 if(obj.options[i].selected)  
  160.                 {  
  161.                     opts.push(obj.options[i]);  
  162.                     obj.remove(i);  
  163.                 }  
  164.             }  
  165.              for(var t = opts.length-1 ; t>=0 ; t--)  
  166.             {  
  167.                 var opt = new Option(opts[t].text,opts[t].value);  
  168.                 opt.selected = true;  
  169.                 obj.options.add(opt);  
  170.             }  
  171.         }   
  172.   
  173.     //-->  
  174. </SCRIPT>  

转载：（jQuery上下左右移动）

标签：mon   选择排序   value   左右移动   ima   rem   tip   mono   gre   

原文地址：http://www.cnblogs.com/jietz0407-com/p/6927131.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！