javascript对下拉列表框(select)的操作

1. <form id="f">
2. <select size="1" name="s">
3. <option value="www.dwww.cn">设计家园</option>
4. <option value="baidu.com">百度</option>
5. </select>
6. </form>
7. ---------------------------------------------------------------------------
8. <script type="text/javascript">
9. <!--
10. var f = document.getElementById("f");
11. //获得select列表项数目
12. document.write(f.s.options.length);
13. document.write(f.s.length);
14. //当前选中项的下标(从0 开始)（有两种方法）
15. //如果选择了多项，则返回第一个选中项的下标
16. document.write(f.s.options.selectedIndex);
17. document.write(f.s.selectedIndex);
18. //检测某一项是否被选中
19. document.write(f.s.options[0].selected);
20. //获得某一项的值和文字
21. document.write(f.s.options[0].value);
22. document.write(f.s.options[1].text);
23. //删除某一项
24. f.s.options[1] = null;
25. //追加一项
26. f.s.options[f.s.options.length] = new Option("追加的text", "追加的value");
27. //更改一项
28. f.s.options[1] = new Option("更改的text", "更改的value");
29. //也可以直接设置该项的 text 和 value
30. //-->
31. </script>
32. //全选列表中的项
33. function SelectAllOption(list)
34. {
35. for (var i=0; i<list.options.length; i++)
36. {
37. list.options[i].selected = true;
38. }
39. }
40. //反选列表中的项
41. function DeSelectOptions(list)
42. {
43. for (var i=0; i<list.options.length; i++)
44. {
45. list.options[i].selected = !list.options[i].selected;
46. }
47. }
48. //返回列表中选择项数目
49. function GetSelectedOptionsCnt(list)
50. {
51. var cnt = 0;
52. var i = 0;
53. for (i=0; i<list.options.length; i++)
54. {
55. if (list.options[i].selected)
56. {
57. cnt++;
58. }
59. }
60. return cnt;
61. }
62. //清空列表
63. function ClearList(list)
64. {
65. while (list.options.length > 0)
66. {
67. list.options[0] = null;
68. }
69. }
70. //删除列表选中项
71. //返回删除项的数量
72. function DelSelectedOptions(list)
73. {
74. var i = 0;
75. var deletedCnt = 0;
76. while (i < list.options.length)
77. {
78. if (list.options[i].selected)
79. {
80. list.options[i] = null;
81. deletedCnt++;
82. }
83. else
84. {
85. i++;
86. }
87. }
88. return deletedCnt;
89. }
90. //此函数查找相应的项是否存在
91. //repeatCheck是否进行重复性检查
92. //若为"v"，按值进行重复值检查
93. //若为"t"，按文字进行重复值检查
94. //若为"vt"，按值和文字进行重复值检查
95. //其它值，不进行重复性检查，返回false
96. function OptionExists(list, optText, optValue, repeatCheck)
97. {
98. var i = 0;
99. var find = false;
100. if (repeatCheck == "v")
101. {
102. //按值进行重复值检查
103. for (i=0; i<list.options.length; i++)
104. {
105. if (list.options[i].value == optValue)
106. {
107. find = true;
108. break;
109. }
110. }
111. }
112. else if (repeatCheck == "t")
113. {
114. //按文字进行重复检查
115. for (i=0; i<list.options.length; i++)
116. {
117. if (list.options[i].text == optText)
118. {
119. find = true;
120. break;
121. }
122. }
123. }
124. else if (repeatCheck == "vt")
125. {
126. //按值和文字进行重复检查
127. for (i=0; i<list.options.length; i++)
128. {
129. if ((list.options[i].value == optValue) && (list.options[i].text == optText))
130. {
131. find = true;
132. break;
133. }
134. }
135. }
136. return find;
137. }
138. //向列表中追加一个项
139. //list 是要追加的列表
140. //optText 和 optValue 分别表示项的文字和值
141. //repeatCheck 是否进行重复性检查，参见 OptionExists
142. //添加成功返回 true，失败返回 false
143. function AppendOption(list, optText, optValue, repeatCheck)
144. {
145. if (!OptionExists(list, optText, optValue, repeatCheck))
146. {
147. list.options[list.options.length] = new Option(optText, optValue);
148. return true;
149. }
150. else
151. {
152. return false;
153. }
154. }
155. //插入项
156. //index 插入位置，当插入位置 >= 列表现有项数量时，其作用相当于不进行重复检查的追加项
157. //optText 和 optValue 分别表示项的文字和值
158. function InsertOption(list, index, optText, optValue)
159. {
160. var i = 0;
161. for (i=list.options.length; i>index; i--)
162. {
163. list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
164. }
165. list.options[index] = new Option(optText, optValue);
166. }
167. //将一个列表中的项导到另一个列表中
168. //repeatCheck是否进行重复性检查，参见OptionExists
169. //deleteSource项导到目标后，是否删除源列表中的项
170. //返回影响的项数量
171. function ListToList(sList, dList, repeatCheck, deleteSource)
172. {
173. //所影响的行数
174. var lines = 0;
175. var i = 0;
176. while (i<sList.options.length)
177. {
178. if (sList.options[i].selected && AppendOption(dList, sList.options[i].text, sList.options[i].value, repeatCheck))
179. {
180. //添加成功
181. lines++;
182. if (deleteSource)
183. {
184. //删除源列表中的项
185. sList.options[i] = null;
186. }
187. else
188. {
189. i++;
190. }
191. }
192. else
193. {
194. i++;
195. }
196. }
197. return lines;
198. }
199. //列表中选中项上移
200. function MoveSelectedOptionsUp(list)
201. {
202. var i = 0;
203. var value = "";
204. var text = "";
205. for (i=0; i<(list.options.length-1); i++)
206. {
207. if (!list.options[i].selected && list.options[i+1].selected)
208. {
209. value = list.options[i].value;
210. text = list.options[i].text;
211. list.options[i] = new Option(list.options[i+1].text, list.options[i+1].value);
212. list.options[i].selected = true;
213. list.options[i+1] = new Option(text, value);
214. }
215. }
216. }
217. //列表中选中项下移
218. function MoveSelectedOptionsDown(list)
219. {
220. var i = 0;
221. var value = "";
222. var text = "";
223. for (i=list.options.length-1; i>0; i--)
224. {
225. if (!list.options[i].selected && list.options[i-1].selected)
226. {
227. value = list.options[i].value;
228. text = list.options[i].text;
229. list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
230. list.options[i].selected = true;
231. list.options[i-1] = new Option(text, value);
232. }
233. }
234. }