1.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <title>标题页</title> 7 </head> 8 <body> 9 <select size="10" name="select"> 10 <option value="1">1</option> 11 <option value="2">2</option> 12 <option value="3">3</option> 13 <option value="4">4</option> 14 <option value="5">5</option> 15 <option value="6">6</option> 16 <option value="7">7</option> 17 <option value="8">8</option> 18 <option value="9">9</option> 19 <option value="10">10</option> 20 </select> 21 <input type=button value=向上移动 onclick="doUp()"> 22 <input type=button value=向下移动 onclick="doDown()"> 23 <script> 24 function doOrder(select,sequence) //将上、下两个方法合并成一个 25 { 26 if (!select||select.selectedIndex==-1) //如果没有选择列表项,不进行任何操作 27 return false; 28 with (select) 29 { 30 var newIndex = selectedIndex + sequence; //获取移动后的索引 31 var oldIndex = selectedIndex; //旧索引 32 if (newIndex>=options.length||newIndex<0||sequence==0||newIndex<0) //判断是否超出边界 33 { 34 return false; 35 } 36 options[newIndex].swapNode(options[oldIndex]) //交换指定索引处的节点 37 } 38 return true; 39 } 40 function doUp() 41 { 42 doOrder(document.all.select,-1); //向上移动的方法 43 } 44 function doDown() 45 { 46 doOrder(document.all.select,1); //向下移动的方法 47 } 48 </script> 49 </body> 50 </html>