【 认真工作,享受生活 】

笑中千关过,愁内百事哀,争胜是祸,繁华似梦,平淡是福。
随笔 - 57, 文章 - 0, 评论 - 12, 阅读 - 11万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

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

Posted on   qiqi  阅读(814)  评论(1编辑  收藏  举报

功能如下:

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

 



代码如下:
<!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>
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示