JavaScript Select和Option列表元素上下左右移动

ttx9n · 发表于 2008-12-26 23:08:24

支持一次选中多项在左右列表中来回移动作者马嘉楠

<!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 == null) return; 
var index = currentSel.selectedIndex; 
if(direction){//up 
if(index==0) 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; 
}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==0) return; 
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>

<input type="button" value=" Down " id="btnDowm" onClick="move(false);" style="width:65" /> 
</td> 
<td> 
<select multiple id="leftSel" onclick="setButton(this)" 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" />

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

3pjdk29w · 发表于 2023-2-23 18:41:23

hi哦回复iOS就看见

shijie798 · 发表于 2023-6-24 03:51:10

好东西一定要看看！

bp5jgbcnt · 发表于 2023-7-1 17:02:35

终于找到了，我擦

x20yd3qx · 发表于 2023-11-2 20:22:11

很不错的样子

6ox8dn · 发表于 2023-12-10 02:02:16

先把创新班才能下班才能下班

JosephSA · 发表于 2024-4-27 15:42:20

8888888888888888

gyalp · 发表于 2024-7-15 06:14:10

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

vir5051 · 发表于 2024-8-3 16:50:47

看看看咋么

wqpa63gz · 发表于 2024-8-10 07:04:22

加快速度很快就撒谎

账号		自动登录	找回密码
密码			立即注册

[JavaScript] JavaScript Select和Option列表元素上下左右移动

相关帖子