JavaScript：下拉列表项的上下移动和置顶、沉底
刚看到这里有篇javascript js 可上、下移动下拉列表选项的博文，看上去代码有些繁琐。想起之前看到的insertBefore方法，就用这个方法重写了该功能。
但现在存在如下问题：
点Top和Bottom时，被选中项会正确的移到顶部或底部，但被选中项原来位置上的文本会变的和原来位置之前一个位置的文本相同。但一段时间之后，它又会自动变成正确的文本。
我猜想可能是因为javascript的DOM节点操作实在是太费资源了，所以总是有点慢吞吞的，不过具体是什么原因，费解中。。。。
————————————————————————————————————————————————
前面提到的问题已经解决：
当执行完置顶或沉底后，下拉列表有任何操作时（比如鼠标经过），下拉列表的项就会正确显示，因此，在执行完置顶或沉底后，让它再次获得焦点即可。
代码已更新。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>moveOption.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="javascript">
<!--
/**
* insertBefore(newNode,srcNode)
* @param newNode 要插入的节点
* @param srcNode 作为参照的节点
* @return 返回被插入的节点
* 功能：将要插入的节点插入到参照节点的前面。
* 如果要插入的节点本身是文档的一部分，
* 则实际是将要插入的节点newNode移动到参照节点的前面。
*/
function control(_id,top,up,down,bottom){
// 待控制的下拉列表
var obj = document.getElementById(_id);
document.getElementById(top).onclick = function(){
// 置頂
var index = obj.selectedIndex;
obj.insertBefore(obj.options[index],obj.options[0]);
obj.focus();
}
document.getElementById(bottom).onclick = function(){
// 沉底
var index = obj.selectedIndex;
obj.insertBefore(obj.options[index],null);
obj.focus();
}
document.getElementById(up).onclick = function(){
var index = obj.selectedIndex;
// 如果沒有選中項或選中項為第一項，返回
if(index == 0 || index == -1){
return;
}
// 插入到選中項前數一項的前面
obj.insertBefore(obj.options[index],obj.options[index-1]);
obj.focus();
}
document.getElementById(down).onclick = function(){
var index = obj.selectedIndex;
// 如果沒有選中項或選中項為最後一項，返回
if(index == obj.options.length-1 || index == -1){
return;
}
// 插入到選中項后數兩項的前面
obj.insertBefore(obj.options[index],obj.options[index+2]);
obj.focus();
}
};
window.onload = function(){
new control("sBox","top","up","down","bottom");
}
//-->
</script>
</head>
<body>
<select id="sBox" size="10" style="width: 100px; height: 150px;">
<option value=1>A</option>
<option value=3>C</option>
<option value=4>E</option>
<option value=5>F</option>
<option value=7>1</option>
<option value=12>5</option>
</select>
<input type="button" id="top" value="Top"/>
<input type="button" id="up" value="Up"/>
<input type="button" id="down" value="Down"/>
<input type="button" id="bottom" value="Bottom"/>
</body>
</html>