兼容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="顶部" onclick="toTop()"/> <input type="button" value="向上" onclick="toUp()"/> <input type="button" value="向下" onclick="toDown()"/> <input type="button" value="底部" onclick="toFoot()"/> </body> </html>
posted on 2010-07-21 19:29 java课程设计 阅读(295) 评论(0) 收藏 举报
浙公网安备 33010602011771号