1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5
6 <script language="javascript" type="text/javascript">
7 // <![CDATA[
8
9 function btnAdd_onclick() {
10 var select = document.getElementById("select");
11 var newOption = new Option();
12 newOption.text = document.getElementById("txtBox").value;
13 select.appendChild(newOption);
14 select.size = select.options.length;
15
16 }
17
18 function btnDelete_onclick() {
19 var selectObject = document.getElementById("select");
20 var select = document.getElementById("select").options;
21 for (var i = select.length - 1; i >= 0; i--) {
22 if (select[i].selected == true) {
23 selectObject.removeChild(select[i]);
24 }
25 }
26 selectObject.size = selectObject.options.length;
27 }
28
29 function btnMonveDown_onclick() {
30 var selectObject = document.getElementById("select");
31 var select = document.getElementById("select").options;
32 for (var i = select.length - 1; i >= 0; i--) {
33 if (select[i].selected == true&&i!=select.length-1) {
34 var tempText = select[i+1].text;
35 var tempValue = select[i+1].value;
36 select[i + 1].text = select[i].text;
37 select[i + 1].value = select[i].value;
38 select[i].text = tempText;
39 select[i].value = tempValue;
40
41 select[i].selected = false;
42 select[i + 1].selected = true;
43 }
44 }
45
46 selectObject.size = selectObject.options.length;
47 }
48
49 function btnMoveUp_onclick() {
50 var selectObject = document.getElementById("select");
51 var select = document.getElementById("select").options;
52
53 for (var i=0; i<=select.length - 1; i++) {
54 if (select[i].selected == true && i != 0) {
55
56 var tempText = select[i -1].text;
57 var tempValue = select[i - 1].value;
58
59 select[i - 1].text = select[i].text;
60 select[i - 1].value = select[i].value;
61
62 select[i].text = tempText;
63 select[i].value = tempValue;
64
65 select[i].selected = false;
66 select[i - 1].selected = true;
67 }
68 }
69
70 selectObject.size = selectObject.options.length;
71 }
72
73 // ]]>
74 </script>
75 </head>
76 <body>
77 <input type="text" value="" id="txtBox" style=" 200px;" />
78
79 <input type="button" value="添加" id="btnAdd" onclick="return btnAdd_onclick(this)" />
80 <input type="button" value="删除" id="btnDelete" onclick="return btnDelete_onclick()" />
81 <input type="button" value="上移" id="btnMoveUp" onclick="return btnMoveUp_onclick()" />
82 <input type="button" value="下移" id="btnMonveDown" onclick="return btnMonveDown_onclick()" />
83
84 <select id="select" size="1" multiple="multiple" style=" 200px;">
85 </select>
86 </body>
87 </html>