网站制作：使用javascript实现列表框的选项排序

热点排行

使用javascript实现列表框的选项排序

类别：网站制作点击：0 评论：0 推荐：

效果如图：

点击右侧的图标，列表中的选项将上下移动。原代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>start</title>
      <LINK rel="stylesheet" href="../../css/main.css" type="text/css">
</head>
<body MS_POSITIONING="GridLayout">
  <FONT face="宋体"></FONT><FONT face="宋体"></FONT><FONT face="宋体"></FONT>
  <BR>
  <table width="200" border="0" align="center">
   <tr>
    <td class="Title" align="center" nowrap>
     菜单项排序
    </td>
   </tr>
  </table>
  <BR>
  <form id="Form1" method="post" action="data.aspx">
   <table width="60%" border="0" cellpadding="5" cellspacing="0" align="center" class="Workspace">
    <tr class="line0">
     <td width="50%" align="right">

     <select name="seqItem" id="seqItem" size="5">

     <option value="1" selected>系统信息设置</option>

     <option value="2" >基本信息设置</option>

     <option value="4" >AV</option>

     <option value="3" >CTV</option>

     <option value="5" >PCC</option>

     </select>
     </td>
     <td width="50%" align="left"> <img src="../../images/btn/top.jpg" border="0" alt="移动最上面" onClick="doTopItem()" onMouseOver="setCursor(this.style,'hand')"> <br> <br>
     <img src="../../images/btn/up.jpg" border="0" alt="向上移动" onClick="doUpItem()" onMouseOver="setCursor(this.style,'hand')"> <br><br>
     <img src="../../images/btn/down.jpg" border="0" alt="向下移动" onClick="doDownItem()" onMouseOver="setCursor(this.style,'hand')"> <br><br>
     <img src="../../images/btn/bottom.jpg" border="0" alt="移动最下面" onClick="doBottomItem()" onMouseOver="setCursor(this.style,'hand')"></td>
    </tr>
    <tr>
     <td colspan="2">
      <div align="center"><input type="button" value="保存" onClick="doSubmit()">    <input type="button" value="重置" onClick="doRe()"> <input type="hidden" name="items" value="">
      </div>
     </td>
    </tr>
   </table>
  </form>
<SCRIPT LANGUAGE="javascript">
var seqSelect=document.forms[0].seqItem;
var length=5;

//go top
function doTopItem(){
var topV,topT;
var tempV=new Array();
var tempT=new Array();
for(var i=0;i<length;i++){
if(seqSelect.options[i].selected){
    if(i==0)
     return false;
    topV=seqSelect.options[0].value;
    topT=seqSelect.options[0].text;
    seqSelect.options[0].value=seqSelect.options[i].value;
    seqSelect.options[0].text=seqSelect.options[i].text;

    for(var j=1;j<length;j++){
     tempV[j]=seqSelect.options[j].value;
     tempT[j]=seqSelect.options[j].text;
     //alert(tempV+" ··· "+tempT);
     if(j==1){
     seqSelect.options[1].value=topV;
     seqSelect.options[1].text=topT;
     }
     else if(j>i){
        break;
     }
        else{
     seqSelect.options[j].value=tempV[j-1];
     seqSelect.options[j].text=tempT[j-1];
     }
    }

    }
}
seqSelect.options[0].selected=true;
}

//go bottom
function doBottomItem(){
    var bottomV,bottomT;
var tempV=new Array();
var tempT=new Array();
for(var i=0;i<length;i++){
if(seqSelect.options[i].selected){
    if(i==(length-1))
     return false;
    bottomV=seqSelect.options[length-1].value;
    bottomT=seqSelect.options[length-1].text;
    seqSelect.options[length-1].value=seqSelect.options[i].value;
    seqSelect.options[length-1].text=seqSelect.options[i].text;

    for(var j=length-2;j>=0;j--){
     tempV[j]=seqSelect.options[j].value;
     tempT[j]=seqSelect.options[j].text;
     //alert(tempV+" ··· "+tempT);
     if(j==(length-2)){
     seqSelect.options[length-2].value=bottomV;
     seqSelect.options[length-2].text=bottomT;
     }
     else if(j<i){
        break;
     }
        else{
     seqSelect.options[j].value=tempV[j+1];
     seqSelect.options[j].text=tempT[j+1];
     }
    }

    }
}
seqSelect.options[length-1].selected=true;
}

//go up 1
function doUpItem(){
var tempV,tempT;
for(var i=0;i<length;i++){
   if(seqSelect.options[i].selected){
    if(i==0)
         return false;
   tempV=seqSelect.options[i-1].value;
   tempT=seqSelect.options[i-1].text;
   seqSelect.options[i-1].value=seqSelect.options[i].value;
   seqSelect.options[i-1].text=seqSelect.options[i].text;
   seqSelect.options[i].value=tempV;
   seqSelect.options[i].text=tempT;
   seqSelect.options[i-1].selected=true;
   break;
   }
}
}

//go down 1
function doDownItem(){
var tempV,tempT;
for(var i=0;i<length;i++){
   if(seqSelect.options[i].selected){
   if(i==(length-1))
        return false;
   tempV=seqSelect.options[i+1].value;
   tempT=seqSelect.options[i+1].text;
   seqSelect.options[i+1].value=seqSelect.options[i].value;
   seqSelect.options[i+1].text=seqSelect.options[i].text;
   seqSelect.options[i].value=tempV;
   seqSelect.options[i].text=tempT;
   seqSelect.options[i+1].selected=true;
   break;
   }
}
}

//get value
function doSubmit(){
var items="";
for(var i=0;i<length;i++){
if(i==0){
  items=seqSelect.options[i].value;
  }else{
  items=items+"||"+seqSelect.options[i].value;
  }
}
document.forms[0].items.value=items;
//alert(document.forms[0].items.value);
document.forms[0].action="data.aspx";
document.forms[0].submit();
}

function doRe(){
document.forms[0].action="";
document.forms[0].submit();
}

function setCursor(objStyle,cursor)
    {
      objStyle.cursor = cursor;
    }
</SCRIPT>

</body>
</html>

本文地址：http://com.8s8s.com/it/it30999.htm