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>

 

posted on 2017-03-03 02:10  Sharpest  阅读(184)  评论(0)    收藏  举报