JS 实现 ListBox 上下移动项

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="test.WEB_APP.WebForm3" %>
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" >
6

<head runat="server">
7

<title>无标题页</title>
8

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

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

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

posted on 2007-04-02 19:32 空空儿阅读(438) 评论(2) 编辑收藏网摘所属分类: JAVASCRIPT

与我联系

搜索

留言簿(7)

我参与的团队

随笔分类(53)

资源链接

最新随笔

最新评论

阅读排行榜

评论排行榜