兼容FireFox、IE,可以上、下、顶部、底部移动的select option的js; 原理: 置顶:主要是交换当前选择索引的option和当前选择索引上面的option的text、value;将这些option向下移动一个索引,最后将选择的索引的text、value赋值给第0个option即可; 向上移动:向上移动就是将当前选择的索引和当前索引-1也就是当前选择的上面一个的option的text、value交换; 向下移动:和向上相反,将当前选择的索引selectedIndex进行加1也就是当前选择的option的下一个option,然后用变量存储这2个option中的任一个option的text、value进行交换; 底部:将选择的option到options的长度中间的option依次向上交换下text、value,最后将选择的option的text、value赋给最后一个option即可; <!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"> <!-- function toTop(){ var box = document.getElementById("sBox"); var index = box.selectedIndex; if(index > 0){ var text = box.options[index].text; var val = box.options[index].value; for(var i = index;i > 0; i--){ box.options[i].text = box.options[i - 1].text box.options[i].value = box.options[i - 1].value; } box.options[0].value = val; box.options[0].text = text; box.selectedIndex = 0; } } function toUp(){ var box = document.getElementById("sBox"); var index = box.selectedIndex; var i = index - 1; if(index > 0){ var text = box.options[i].text; var val = box.options[i].value; box.options[i].text = box.options[index].text box.options[i].value = box.options[index].value; box.options[index].value = val; box.options[index].text = text; box.selectedIndex = i; } } function toDown(){ var box = document.getElementById("sBox"); var index = box.selectedIndex; var i = 0; if(index != box.length - 1){ i = index + 1 if (index < box.length) { var text = box.options[i].text; var val = box.options[i].value; box.options[i].text = box.options[index].text box.options[i].value = box.options[index].value; box.options[index].value = val; box.options[index].text = text; box.selectedIndex = i; } } } function toFoot(){ var box = document.getElementById("sBox"); var index = box.selectedIndex; var len = box.length; if(index < len - 1){ var text = box.options[index].text; var val = box.options[index].value; for(var j = index + 1;j <= len - 1; j++){ box.options[j - 1].text = box.options[j].text box.options[j - 1].value = box.options[j].value; } box.options[len - 1].value = val; box.options[len - 1].text = text; box.selectedIndex = len - 1; } } //--> </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" value="顶部" οnclick="toTop()"/> <input type="button" value="向上" οnclick="toUp()"/> <input type="button" value="向下" οnclick="toDown()"/> <input type="button" value="底部" οnclick="toFoot()"/> </body> </html>