站内搜索: 请输入搜索关键词

当前页面: 开发资料首页 → Javascript 专题 → 使用javascript实现列表框的选项排序

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

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

效果如图：

点击右侧的图标，列表中的选项将上下移动。原代码如下：
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>
start
<link> rel="stylesheet" href="../../css/main.css" type="text/css">
</head>
<body MS_POSITIONING="GridLayout">



<table width="200" border="0" align="center">
<tr>
<td class="Title" align="center" nowrap>
菜单项排序
</td>
</tr>
</table>


<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">








</td>
</tr>
<tr>
<td colspan="2">

<input type="button" value="保 存" onClick="doSubmit()"> &nbsp;&nbsp;&nbsp;<input type="button" value="重 置" onClick="doRe()"> <input type="hidden" name="items" value="">

</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 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 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 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 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 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 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 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>