JS 实现 ListBox 上下移动项

 1 <% @ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="test.WEB_APP.WebForm3"  %>
 2
 3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 4
 5 < html  xmlns ="http://www.w3.org/1999/xhtml"  dir ="ltr"   >
 6 < head  runat ="server" >
 7      < title > 无标题页 </ title >
 8      < script  language ="Javascript"  type ="text/javascript" >
 9        var obj , count,selectIndex,type;        
10        var MSG = [ {id:1,msg:"请选择要移动的项"},
11                    {id:2,msg:"已是第一个无法上移"},
12                    {id:3,msg:"已是最后一个无法下移"},
13                 ]
14        //初始化相关数据
15        function intial(t)
16        {
17            obj = rtObject();
18            count = ItemCount();            
19            selectIndex = getSelectIndex();   
20            type = t;         
21        }
22        function move(t)
23        {
24           intial(t);
25           if(!check())     
26              moveHandle();
27        }
28        function moveHandle()
29        {
30            //根据相关操作获得要变换位置的索引
31            var operate = type == 1 ? "-1" : "+1" ;
32            var index = eval( selectIndex + operate);
33            
34            var values = obj.options[index].value;
35            var text = obj.options[index].text;            
36            obj.options[index].value = obj.options[selectIndex].value;
37            obj.options[index].text = obj.options[selectIndex].text;            
38            obj.options[selectIndex].value = values;
39            obj.options[selectIndex].text = text; 
40                       
41            obj.options[index].selected = true;
42        }
43        //检查是否可以移动
44        function check()
45        {
46            var bool = type == 1 ? selectIndex == 0 : selectIndex == count-1 ;
47            if(bool)
48                alert(MSG[type].msg);
49             return bool;
50        }
51        //获取当前选中项的索引
52        function getSelectIndex()
53        {     
54            var index = -1;     
55            for(var i = 0 ; i < count ; i ++)
56            {
57               if(obj.options[i].selected)
58               {
59                  index = i;
60                  break;
61                }
62            }
63            //判断有没有选择移动项
64            if(index >=0 )
65                return index;
66            else
67                alert(MSG[0].msg);
68        }
69        //获取项总数
70        function ItemCount()
71        {
72            return obj.options.length;
73        }
74        //返回ListBox对象
75        function rtObject()
76        {
77            return document.form1.elements["lb"];
78        }
79     </ script >
80 </ head >
81 < body >
82      < form  id ="form1"  runat ="server" >
83      < div >
84          < asp:ListBox  ID ="lb"  runat ="server"  Height ="144px"  Width ="179px" >
85              < asp:ListItem > a </ asp:ListItem >
86              < asp:ListItem > b </ asp:ListItem >
87              < asp:ListItem > c </ asp:ListItem >
88              < asp:ListItem > d </ asp:ListItem >
89              < asp:ListItem > e </ asp:ListItem >
90              < asp:ListItem > f </ asp:ListItem >
91              < asp:ListItem > g </ asp:ListItem >
92              < asp:ListItem > h </ asp:ListItem >
93          </ asp:ListBox >
94          < input  id ="Button1"  type ="button"  onclick ="move(1)"  value ="上移"   />
95          < input  id ="Button2"  type ="button"  onclick ="move(2)"  value ="下移"   /></ div >
96      </ form >
97 </ body >
98 </ html >
99

转载于:https://www.cnblogs.com/doll-net/archive/2007/04/02/697383.html