列表项可上下移动的Multiple列表

  1<html>
  2<head>
  3<title> New Document </title>
  4<meta content="EditPlus" name="Generator"/>
  5<meta content="" name="Author"/>
  6<meta content="" name="Keywords"/>
  7<meta content="" name="Description"/>
  8<style>   
  9BODY, SELECT   
 10{   
 11FONT-FAMILY: TIMES NEW ROMAN;   
 12FONT-SIZE: 10PT;   
 13}   
 14</style>
 15<script language="JavaScript">   
 16<!--   
 17window.onload = initPage;   
 18function initPage()   
 19{   
 20btnPutUp.onclick = putUp;   
 21btnPutDown.onclick = putDown;   
 22  
 23btnGoUp.onclick = goUp;   
 24btnGoDown.onclick = goDown;   
 25}   
 26  
 27function putUp()   
 28{   
 29var strTempValue;   
 30var strTempText;   
 31var intCurIndex;   
 32  
 33intCurIndex = sltFruit.selectedIndex;   
 34//alert("intCurIndex: " + intCurIndex);   
 35  
 36if (intCurIndex > 0)   
 37{   
 38strTempValue= sltFruit.options.item(intCurIndex).value;   
 39strTempText = sltFruit.options.item(intCurIndex).text;   
 40//alert(strTempText + " - " + strTempValue);   
 41  
 42sltFruit.options.item(intCurIndex).value = sltFruit.options.item(intCurIndex - 1).value;   
 43sltFruit.options.item(intCurIndex).text = sltFruit.options.item(intCurIndex - 1).text;   
 44sltFruit.options.item(intCurIndex - 1).value= strTempValue;   
 45sltFruit.options.item(intCurIndex - 1).text = strTempText;   
 46sltFruit.selectedIndex = intCurIndex - 1;   
 47}   
 48}   
 49  
 50function putDown()   
 51{   
 52var strTempValue;   
 53var strTempText;   
 54var intCurIndex;   
 55var intIndexCount;   
 56  
 57intCurIndex = sltFruit.selectedIndex;   
 58intIndexCount = sltFruit.length;   
 59//alert("intCurIndex: " + intCurIndex);   
 60//alert("intIndexCount: " + intIndexCount);   
 61  
 62if (intCurIndex < intIndexCount - 1)   
 63{   
 64strTempValue= sltFruit.options.item(intCurIndex).value;   
 65strTempText = sltFruit.options.item(intCurIndex).text;   
 66//alert(strTempText + " - " + strTempValue);   
 67  
 68sltFruit.options.item(intCurIndex).value = sltFruit.options.item(intCurIndex + 1).value;   
 69sltFruit.options.item(intCurIndex).text = sltFruit.options.item(intCurIndex + 1).text;   
 70sltFruit.options.item(intCurIndex + 1).value= strTempValue;   
 71sltFruit.options.item(intCurIndex + 1).text = strTempText;   
 72sltFruit.selectedIndex = intCurIndex + 1;   
 73}   
 74}   
 75  
 76function goUp()   
 77{   
 78var intCurIndex;   
 79intCurIndex = sltCountry.selectedIndex;   
 80  
 81if (intCurIndex > 0)   
 82sltCountry.selectedIndex = intCurIndex - 1;   
 83}   
 84  
 85function goDown()   
 86{   
 87var intCurIndex;   
 88var intIndexCount;   
 89  
 90intCurIndex = sltCountry.selectedIndex;   
 91intIndexCount = sltCountry.length;   
 92  
 93if (intCurIndex < intIndexCount - 1)   
 94sltCountry.selectedIndex = intCurIndex + 1;   
 95}   
 96//-->   
 97</script>
 98</head>
 99<body>
100</body>   
101水果列表<br/>   
1021 - 香蕉<br/>   
1032 - 苹果<br/>   
1043 - 葡萄<br/>   
1054 - 桔子<br/>   
1065 - 西瓜<br/>
107<select name="sltFruit" size="5">
108<option value="1">香蕉</option>
109<option value="2">苹果</option>
110<option value="3">葡萄</option>
111<option value="4">桔子</option>
112<option value="5">西瓜</option>
113</select>
114<input id="btnPutUp" type="BUTTON" value="上移"/>
115<input id="btnPutDown" type="BUTTON" value="下移"/>
116<hr/>   
117  
118国家列表<br/>   
1191 - China<br/>   
1202 - USA<br/>   
1213 - USSR<br/>   
1224 - England<br/>   
1235 - France<br/>
124<select name="sltCountry">
125<option value="1">China</option>
126<option value="2">USA</option>
127<option value="3">USSR</option>
128<option value="4">England</option>
129<option value="5">France</option>
130</select>
131<input id="btnGoUp" type="BUTTON" value="上移"/>
132<input id="btnGoDown" type="BUTTON" value="下移"/>
133</html>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus