【JavaScript】列表元素上下左右移动：Select和Option的应用
2010-09-14 13:37:24 来源：WEB开发网功能如下：
支持一次选中多项在左右列表中来回移动
代码如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>NewDocument</TITLE>
<METANAME="Author"CONTENT="majianan">
<scriptlanguage="javascript">
varcurrentSel=null;
functionmove(){
if(arguments.length==1){
moveUp(arguments[0]);
}elseif(arguments.length==2){
moveRight(arguments[0],arguments[1]);
}
}
functionmoveUp(direction){
if(currentSel==null)return;
varindex=currentSel.selectedIndex;
if(direction){//up
if(index==0)return;
varvalue=currentSel.options[index-1].value;
vartext=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;
varvalue=currentSel.options[index+1].value;
vartext=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;
}
}
functionmoveRight(src,des){
if(src.selectedIndex==-1){
alert("Pleaseselectfirst!");
return;
}
for(vari=0;i<src.length;i++){
if(src[i].selected){
varop=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--;
}
}
}
functionsetButton(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"));
}
}
functionreSelect(obj){
for(vari=0;i<obj.length;i++){
if(obj[i].selected)obj[i].selected=false;
}
}
</script>
</HEAD>
<BODY>
<formid="form1">
<tablewidth="40%"align="center">
<tr>
<td>
<inputtype="button"value="Up"id="btnUp"onClick="move(true);"style="width:65"/>
<br/>
<inputtype="button"value="Down"id="btnDowm"onClick="move(false);"style="width:65"/>
</td>
<td>
<selectmultipleid="leftSel"onclick="setButton(this)"ondblclick="document.getElementById('btnRight').click()"style="height:200px;width:100px;">
<optgrouplabel="LeftList"/>
<optionvalue="1">Java</option>
<optionvalue="2">JavaScript</option>
<optionvalue="3">C++</option>
<optionvalue="4">HTML</option>
</select>
</td>
<td>
<inputtype="button"value=">>"id="btnRight"onClick="move(document.getElementById('leftSel'),document.getElementById('rightSel'));"style="width:65"/>
<br/>
<inputtype="button"value="<<"id="btnLeft"onClick="move(document.getElementById('rightSel'),document.getElementById('leftSel'));"style="width:65"/>
</td>
<td>
<selectmultipleid="rightSel"onclick="setButton(this)" ondblclick="document.getElementById('btnLeft').click()"style="height:200px;width:100px;">
<optgrouplabel="RightList"/>
<optionvalue="5">CSS</option>
<optionvalue="6">.Net</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Tags：JavaScript 列表 元素
编辑录入：爽爽 [复制链接] [打 印]
中查找“【JavaScript】列表元素上下左右移动：Select和Option的应用”更多相关内容
中查找“【JavaScript】列表元素上下左右移动：Select和Option的应用”更多相关内容更多精彩
赞助商链接
