怎样用javascript实现selet框中option的上下移动!

如题
---------------------------------------------------------------

下面是我自己的一段源代码!

 1<form action="" id="form2" method="post" name="form2">
 2<select id="Sel_title" name="Sel_title" size="8">
 3<option value="1">1</option>   
 4......   
 5</select>
 6<span style="CURSOR: hand"><img alt="顶部" border="0" onclick="Javascript:GetTop();" src="images/top.gif"/></span>
 7<span style="CURSOR: hand"><img alt="向上" border="0" onclick="Javascript:GetUp();" src="images/up.gif"/></span>
 8<span style="CURSOR: hand"><img alt="向下" border="0" onclick="Javascript:GetDown();" src="images/down.gif"/></span>
 9<span style="CURSOR: hand"><img alt="底部" border="0" onclick="Javascript:GetTail();" src="images/tail.gif"/></span>
10</form>

用javascript实现移动功能

 1<script language="javascript">   
 2<!--   
 3function GetTop(){   
 4var i;   
 5i=document.form2.Sel_title.selectedIndex;   
 6if(i>0){   
 7Temp_Text=document.form2.Sel_title.options(i).text;   
 8Temp_ID=document.form2.Sel_title.options(i).value;   
 9for(j=i;j>0;j--){   
10document.form2.Sel_title.options(j).text=document.form2.Sel_title.options(j-1).text;   
11document.form2.Sel_title.options(j).value=document.form2.Sel_title.options(j-1).value;   
12}   
13document.form2.Sel_title.options(0).value=Temp_ID;   
14document.form2.Sel_title.options(0).text=Temp_Text;   
15  
16document.form2.Sel_title.selectedIndex=0;   
17}   
18}   
19  
20function GetUp(){   
21var i,j;   
22i=document.form2.Sel_title.selectedIndex;   
23j=i-1   
24if(i>0){   
25Temp_Text=document.form2.Sel_title.options(j).text;   
26Temp_ID=document.form2.Sel_title.options(j).value;   
27  
28document.form2.Sel_title.options(j).text=document.form2.Sel_title.options(i).text;   
29document.form2.Sel_title.options(j).value=document.form2.Sel_title.options(i).value;   
30  
31document.form2.Sel_title.options(i).text=Temp_Text;   
32document.form2.Sel_title.options(i).value=Temp_ID;   
33  
34document.form2.Sel_title.selectedIndex=j;   
35}   
36}   
37  
38function GetDown(){   
39var i,j;   
40i=document.form2.Sel_title.selectedIndex;   
41if (i!=document.form2.Sel_title.length-1){   
42j=i+1;   
43if(i<document.form2.Sel_title.length){   
44Temp_Text=document.form2.Sel_title.options(j).text;   
45Temp_ID=document.form2.Sel_title.options(j).value;   
46  
47document.form2.Sel_title.options(j).text=document.form2.Sel_title.options(i).text;   
48document.form2.Sel_title.options(j).value=document.form2.Sel_title.options(i).value;   
49  
50document.form2.Sel_title.options(i).text=Temp_Text;   
51document.form2.Sel_title.options(i).value=Temp_ID;   
52  
53document.form2.Sel_title.selectedIndex=j;   
54}   
55}   
56}   
57  
58function GetTail(){   
59var i,j;   
60i=document.form2.Sel_title.selectedIndex;   
61j=document.form2.Sel_title.length-1   
62if(i<j){   
63Temp_Text=document.form2.Sel_title.options(i).text;   
64Temp_ID=document.form2.Sel_title.options(i).value;   
65for(k=i+1;k<=j;k++){   
66document.form2.Sel_title.options(k-1).text=document.form2.Sel_title.options(k).text;   
67document.form2.Sel_title.options(k-1).value=document.form2.Sel_title.options(k).value;   
68}   
69  
70document.form2.Sel_title.options(j).text=Temp_Text;   
71document.form2.Sel_title.options(j).value=Temp_ID;   
72  
73document.form2.Sel_title.selectedIndex=j;   
74}   
75}   
76//-->   
77</script>
Published At
Categories with Web编程
comments powered by Disqus