笑看風云
          
			一切從頭開始
		          		
	
          

          

          

          

          posts - 28, comments - 1, trackbacks - 0, articles - 2
          


          		
	
          
	
          
		
			
		
		
			
          
				
					
	
          
		
          
			
          
				列表框的左右上下移動
			
          
 			Posted on 2009-01-09 16:41 笑看風云 閱讀(328) 評論(0)  編輯  收藏  所屬分類: javascript 
			
			


		
          
		
          效果圖如下：
          

          

          <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
          
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
          
          <html>
          
              <head>
          
                  <title>列表框上下左右操作</title>
          
              </head>
          
              <script language="javascript">  
          
              <!--   
          
    var ListUtil           = new Object();   
          
              //全部移動   
          
              ListUtil.moveAll = function moveAll(oListboxFrom,oListboxTo){   
          
        var options           = oListboxFrom.options;   
          
                  for(var i = 0; i < options.length; i++){   
          
            oListboxTo.appendChild(options[i]);           //???   
          
                      i -= 1;  //???每刪除一個選項后，每個選項的index會被重置   
          
                  }             
          
    }             
          
              //單個或多個移動   
          
              ListUtil.moveMuti = function moveMuti(oListboxFrom,oListboxTo){   
          
        var options           = oListboxFrom.options;   
          
                  for(var i = 0; i < options.length; i++){   
          
                      if(options[i].selected){   
          
                oListboxTo.appendChild(options[i]);   
          
                i           -= 1;   
          
            }             
          
        }             
          
    }             
          
              //上移   
          
              ListUtil.shiftUp = function(oListbox) {   
          
                  if(oListbox.selectedIndex > 0){   
          
            var oOption           = oListbox.options[oListbox.selectedIndex];   
          
            var oPrevOption           = oListbox.options[oListbox.selectedIndex-1];   
          
            oListbox.insertBefore(oOption,oPrevOption);   
          
        }             
          
    }             
          
              //下移   
          
              ListUtil.shiftDown = function(oListbox){   
          
                  if(oListbox.selectedIndex < oListbox.options.length-1){   
          
            var oOption           = oListbox.options[oListbox.selectedIndex];   
          
            var oNextOption           = oListbox.options[oListbox.selectedIndex+1];   
          
            oListbox.insertBefore(oNextOption,oOption);   
          
        }             
          
    }             
          
              //-->  
          
              </script>
          
              <body text="#000000" bgcolor="#ffffff" link="#0033cc">
          
                  <form method=post action="#">
          
                      <table>
          
                          <tr><td>
          
                        未選員工
          
                                  <select name="oListboxFrom" id="oListboxFrom" size="10"
          
                            multiple          ="true"
          
                            style          ="width: 100px; height: 250px; margin-left: 20px; float: left">
          
                                      <option value="1" selected>員工1</option>
          
                                      <option value="2">員工2</option>
          
                                      <option value="3">員工3</option>
          
                                      <option value="4">員工4</option>
          
                                      <option value="5">員工5</option>
          
                                  </select>
          
                              </td>
          
                              <td align="center">
          
                                  <input type="button" value=" >>> "
          
                            onclick          ="ListUtil.moveAll(oListboxFrom, oListboxTo);" />
          
                                  <br />
          
                                  <input type="button" value=" >> "
          
                            onclick          ="ListUtil.moveMuti(oListboxFrom, oListboxTo);" />
          
                                  <br />
          
                                  <input type="button" value=" << "
          
                            onclick          ="ListUtil.moveMuti(oListboxTo, oListboxFrom);" />
          
                                  <br />
          
                                  <input type="button" value=" <<< "
          
                            onclick          ="ListUtil.moveAll(oListboxTo, oListboxFrom);" />
          
                                  <br />
          
                                  <input type="button" value=" ↑ "
          
                            onclick          ="ListUtil.shiftUp(oListboxFrom);" />
          
                                  <br />
          
                                  <input type="button" value=" ↓ "
          
                            onclick          ="ListUtil.shiftDown(oListboxFrom);" />
          
                              </td>
          
                              <td>
          
                        已選員工
          
                                  <select name="oListboxTo" id="oListboxTo" multiple="true"
          
                            size          ="10"
          
                            style          ="width: 100px; height: 250px; margin-left: 20px; float: left">
          
                                      <option value="319094784">員工6</option>
          
                                      <option value="320274432">員工8</option>
          
                                      <option value="322109440">員工7</option>
          
                                  </select>
          
                              </td>
          
                          </tr>
          
                      </table>
          
                  </form>
          
              </body>
          
          </html>
          

          

          

          
	
          


          
	    
    




          








          

				
			
          
		          		
	
          
	
          
		
			

		
	
          

          


    







          
        
	




主站蜘蛛池模板：
望江县|
乌拉特中旗|
内丘县|
若羌县|
河津市|
温泉县|
泰顺县|
北碚区|
东阿县|
龙泉市|
县级市|
抚松县|
海南省|
桃江县|
安岳县|
简阳市|
廉江市|
株洲县|
怀远县|
洮南市|
长武县|
余庆县|
无为县|
铁岭市|
库尔勒市|
合山市|
新巴尔虎右旗|
德庆县|
屏边|
汶上县|
会泽县|
建湖县|
蓬溪县|
桦甸市|
阳谷县|
县级市|
牟定县|
迁西县|
尉氏县|
南岸区|
临沂市|