JS实现Select的option上下移动的方法
本文实例讲述了JS实现Select的option上下移动的方法。分享给大家供大家参考，具体如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript">
functionUpOrDown(direct,selectId){//direct:1:Up,-1:Down
varobj=document.getElementById(selectId);
varlen=obj.length;
varindex=obj.selectedIndex;
//如果：1.没有选中的项;2.向上，但已是最上;3.向下，但是最下，不作处理
if((index==-1)||(direct==-1&&index==0)||(direct==1&&index>=len-1))
return;
varswapIndex=index+direct;
vartempOptions=newArray();
for(vari=0;i<len;i++){
tempOptions[tempOptions.length]=obj.options[i==index?swapIndex:(i==swapIndex?index:i)];
}
obj.options.length=0;
for(vari=0;i<len;i++)
obj.options.add(tempOptions[i]);
}
functionUpOrDown2(direct,selectId){//direct:1:Up,0:Down
varobj=document.getElementById(selectId);
varlen=obj.length;
varindex=obj.selectedIndex;
//如果：1.没有选中的项;2.向上，但已是最上;3.向下，但是最下，不作处理
if((index==-1)||(direct==1&&index==0)||(direct==0&&index>=len-1))
return;
vartempOptions=newArray();
//如是向上，得到自己上一个到最后的option数组；如是向下，得到自己到最后一个的option数组
for(vari=index-direct;i<len;i++)
tempOptions[tempOptions.length]=obj.options[i];
//去除刚才取得的部分
obj.options.length=index-direct;
//颠倒取两个option
obj.options.add(tempOptions[1]);
obj.options.add(tempOptions[0]);
//将余下的option全部加进来
for(vari=2;i<tempOptions.length;i++)
obj.options.add(tempOptions[i]);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<selectid="Select1"size="100"style="width:100px;height:200px;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td>
<imgid="imgUp"alt="Up"onclick="UpOrDown(-1,'Select1')"style="cursor:pointer;"/><br/>
<imgid="imgDown"alt="Down"onclick="UpOrDown(1,'Select1')"style="cursor:pointer;"/>
</td>
<td>
<imgid="img1"alt="Up2"onclick="UpOrDown2(1,'Select1')"style="cursor:pointer;"/><br/>
<imgid="img2"alt="Down2"onclick="UpOrDown2(0,'Select1')"style="cursor:pointer;"/>
</td>
</tr>
</table>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。