首页 > 代码库 > 转载：（jQuery上下左右移动）

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

2024-09-28 21:15:39   219人阅读

<!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="http://www.mamicode.com/20">测试数据一</option>  
       <option value="http://www.mamicode.com/30">测试数据二</option>  
       <option value="http://www.mamicode.com/40">测试数据三</option>  
       <option value="http://www.mamicode.com/50">测试数据四</option>  
       <option value="http://www.mamicode.com/60">测试数据五</option>  
       <option value="http://www.mamicode.com/70">测试数据六</option>    
       <option value="http://www.mamicode.com/80">测试数据七</option>  
       <option value="http://www.mamicode.com/90">测试数据八</option>    
  </select>  
   </td>  
      <td width="20%" align="center">  
  <input type="button" value="http://www.mamicode.com/>>" onclick="moveOption(document.getElementById(‘left‘),document.getElementById(‘right‘))"><br><br>  
  <input type="button" value="http://www.mamicode.com/<<" 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="http://www.mamicode.com/置顶" onclick="moveTop(document.getElementById(‘right‘));">  
  <INPUT TYPE="button" value="http://www.mamicode.com/上移" onclick="moveUp(document.getElementById(‘right‘));">  
  <INPUT TYPE="button" value="http://www.mamicode.com/下移" onclick="moveDown(document.getElementById(‘right‘));">  
  <INPUT TYPE="button" value="http://www.mamicode.com/置底" 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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/ 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上下左右移动）


联系
我们