【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
功能如下:
支持一次选中多项在左右列表中来回移动
<script language=javascript> var currentSel = null; 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 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; if(direction){//up if (currentSel.selectedIndex > 0) { for(var i=0;i =0;i--){ if(currentSel[i].selected){ if(i==currentSel.length-1) return; 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
| |
代码如下:
<!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==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 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 ;
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-1) return ;
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>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="majianan">
<SCRIPT language=javascript>
var currentSel = null ;
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 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 ;
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-1) return ;
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>