Oo缘来是你oO


posts - 120,comments - 125,trackbacks - 0
 

 【JavaScript】列表(Select)选项(Option)的移动(上下左右)

马嘉楠    2009-1-11

共同学习,欢迎转载。转载请注明地址【http://blog.csdn.net/majianan/archive/2009/01/11/3754521.aspx】,谢谢O(∩_∩)O!

对《【JavaScript】列表元素上下左右移动:Select和Option的应用》中的方法进行了优化。

1.使用appendChild()方法优化左右移动函数moveRight()

2.使用insertBefore()方法优化上下移动函数moveUp()

3.修改同时选中多项上下移动不正常的Bug

 

功能如下:

支持一次选中多项在左右列表中来回移动

 



 

 

 

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 
<HEAD>
  
<TITLE> New Document </TITLE>
  
<META NAME="Author" CONTENT="majianan">
<SCRIPT language=javascript>
    
var currentSel = null;
    
function
 setButton(obj){        
        
if(obj.length==0return
;
        currentSel 
=
 obj;
        
if(obj.id=="leftSel"
){
            document.getElementById(
"btnLeft").disabled = true
;
            document.getElementById(
"btnRight").disabled = false
;                
            reSelect(document.getElementById(
"rightSel"
));            
        }
else
{
            document.getElementById(
"btnLeft").disabled = false
;
            document.getElementById(
"btnRight").disabled = true
;               
            reSelect(document.getElementById(
"leftSel"
));                
        }       
    }

      
function
 move(){
          
if(arguments.length==1
){
              moveUp(arguments[
0
]);
          }
else if(arguments.length==2
){
              moveRight(arguments[
0],arguments[1
]);
          }
      }

      
function
 moveUp(direction){
          
if(currentSel == nullreturn
;
          
if(direction){//up

            if (currentSel.selectedIndex > 0) {  
                
for(var i=0;i<currentSel.length;i++
){
                    
if
(currentSel[i].selected){
                        
var oOption =
 currentSel.options[i];
                        
var oPrevOption = currentSel.options[i---1
];
                        currentSel.insertBefore(oOption, oPrevOption);
                    }
                }                
            } 
          }
else{//down

            for(var i=currentSel.length-1;i>=0;i--){
                
if
(currentSel[i].selected){
                    
if(i==currentSel.length-1return
;
                    
var oOption =
 currentSel.options[i];
                    
var oNextOption = currentSel.options[i+1
];
                    currentSel.insertBefore(oNextOption, oOption);                        
                }
            }
          }
      }

    
function
 moveRight(src,des){
        
if(src.selectedIndex==-1
){
            alert(
"Please select first!"
);
            
return
;
        }
        
for(var i=0;i<src.length;i++
){
            
if
(src[i].selected){
                des.appendChild(src.options[i
--
]);
            }
        }
        setButton(des);
    }
    
    
function
 reSelect(obj){
        
for(var i=0; i<obj.length; i++
){
            
if(obj[i].selected) obj[i].selected = false
;
        }
    }
    
</SCRIPT>


 
</HEAD>

 
<BODY>
  
<form id="form1">
      
<table width="40%" align="center">
          
<tr>
              
<td>
                  
<input type="button" value=" Up " id="btnUp" onClick="move(true);" style="width:65"/>
                
<br />
                
<input type="button" value=" Down " id="btnDowm" onClick="move(false);" style="width:65" />                
              
</td>

              
<td>
                  
<select multiple id="leftSel" onclick="setButton(this)" ondblclick="document.getElementById('btnRight').click()" style="height:200px;width:100px;">

                    
<option value="1">Java</option>
                    
<option value="2">JavaScript</option>
                    
<option value="3">C++</option>
                    
<option value="4">HTML</option>
                
</select>
            
</td>
            
<td>
                
<input type="button" value=" >> " id="btnRight" onClick="move(document.getElementById('leftSel'),document.getElementById('rightSel'));" style="width:65" />
                
<br />
                
<input type="button" value=" << " id="btnLeft" onClick="move(document.getElementById('rightSel'),document.getElementById('leftSel'));" style="width:65" />
                
</td>
                
<td>
                    
<select multiple id="rightSel" onclick="setButton(this)"  ondblclick="document.getElementById('btnLeft').click()" style="height:200px;width:100px;" >
 
                    
<option value="5">CSS</option>
                    
<option value="6">.Net</option>
                    
</select>
                
</td>
            
</tr>
        
</table>
    
</form>
 
</BODY>
</HTML>



马嘉楠
jianan.ma@gmail.com

posted on 2009-01-11 22:58 马嘉楠 阅读(587) 评论(0)  编辑  收藏 所属分类: SoureCodeJava Script

只有注册用户登录后才能发表评论。


网站导航: