Oo缘来是你oO


posts - 120,comments - 125,trackbacks - 0

 【JavaScript】列表元素上下左右移动:Select和Option的应用

马嘉楠    2008-12-26

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

 

 

功能如下:

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

 



代码如下:
<!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
 move(){
          
if(arguments.length==1
){
              moveUp(arguments[
0
]);
          }
else if(arguments.length==2
){
              moveRight(arguments[
0],arguments[1
]);
          }
      }
      
function
 moveUp(direction){
          
if(currentSel == nullreturn
;
          
var index =
 currentSel.selectedIndex;
          
if(direction){//up

              if(index==0return;
              
              
var value = currentSel.options[index-1
].value;
              
var text = currentSel.options[index-1
].text;
              
              currentSel.options[index
-1].value =
 currentSel.options[index].value;
              currentSel.options[index
-1].text =
 currentSel.options[index].text;
              
              currentSel.options[index].value 
=
 value;
              currentSel.options[index].text 
=
 text;
              
              currentSel.options[index].selected 
= false
;
              currentSel.options[index
-1].selected = true
;
          }
else{//down

              if(index==(currentSel.length-1)) return;
              
              
var value = currentSel.options[index+1
].value;
              
var text = currentSel.options[index+1
].text;
              
              currentSel.options[index
+1].value =
 currentSel.options[index].value;
              currentSel.options[index
+1].text =
 currentSel.options[index].text;
              
              currentSel.options[index].value 
=
 value;
              currentSel.options[index].text 
=
 text;
              
              currentSel.options[index].selected 
= false
;
              currentSel.options[index
+1].selected = true
;
          }
      }
    
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){
                
var op = document.createElement("option"
);
                op.value 
=
 src.options[src.selectedIndex].value;
                op.text 
=
 src.options[src.selectedIndex].text;
                des.options.add(op);
                    src.remove(i);
                    i
--
;
            }
        }   
    }
    
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
 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;">
                    
<optgroup label="Left List" /> 
                    
<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;" >
                    
<optgroup label="Right List" /> 
                    
<option value="5">CSS</option>

                    
<option value="6">.Net</option>
                    
</select>
                
</td>
            
</tr>
        
</table>
    
</form>
 
</BODY>
</HTML>


马嘉楠
jianan.ma@gmail.com

posted on 2008-12-26 15:20 马嘉楠 阅读(2127) 评论(2)  编辑  收藏 所属分类: SoureCodeJava Script

FeedBack:
# re: 【原】【JavaScript】列表元素上下左右移动:Select和Option的应用[未登录]
2008-12-28 15:24 | chair
还不错,支持双击就更好了  回复  更多评论
  
# re: 【原】【JavaScript】列表元素上下左右移动:Select和Option的应用
2008-12-29 11:56 | 马嘉楠
@chair
谢谢, 已经修改,支持双击操作  回复  更多评论
  

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


网站导航: