html的下拉框的几个基本使用方法

尽管使用EXT开发了一段时间，可是自己认为我对javascript还是不是非常熟，所以边看书边做小样例 给自己以后用到的时候查看下，都是非常主要的东西，对刚開始学习的人可能有点帮助




以下是代码

1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=gbk">
4. <title>grid</title>
5. </head>
6. <body>
7. <input type="button" value="getSelect" onclick = "getSelect()"/>
8. <input type="button" value="selectbtn" onclick = "getSelAge()"/>
9. <div>
10. <select name="selectAge" id="selectAge">
11. <option value="1">18-21</option>
12. <option value="2">22-25</option>
13. <option value="3">26-29</option>
14. <option value="4">30-35</option>
15. <option value="5">Over35</option>
16. </select>
17. </div>
18. <p>
19. <input type="button" value="moreSelect" onclick = "moreSelect()"/>
20. <div>
21. <div>多选 须要添加 multiple属性<br>
22. 在多选中size属性 能够初始化下拉框默认显示几个选项
23. </div>
24. <div>
25. <select name="moreselAge" id="moreselAge" multiple="multiple">
26. <option value="1">18-21</option>
27. <option value="2">22-25</option>
28. <option value="3">26-29</option>
29. <option value="4">30-35</option>
30. <option value="5">Over35</option>
31. <option value="6">Over40</option>
32. <option value="7">Over50</option>
33. </select>
34. </div>
35. </div>
36. <p></p>
37. <input type="button" value="addNewbtn" onclick = "addNewSelections()"/>
38. <input type="button" value="deletebtn" onclick = "deleteselections()"/>
39. <input type="button" value="deleAllbtn" onclick = "deleteAllSelections()"/>
40. <div>selectName :<input type="text" id="txtName"/></div>
41. <div>selectValue:<input type="text" id="txtValue"/></div>
42. <div>
43. <select name="moreselAge" id="addNew">
44. <option value="1" selected>18-21</option>
45. <option value="2">22-25</option>
46. <option value="3">26-29</option>
47. <option value="4">30-35</option>
48. <option value="5">Over35</option>
49. <option value="6">Over40</option>
50. <option value="7">Over50</option>
51. </select>
52. </div>
53. <p>移动选项</p>
54. <p>
55. <table>
56. <tr collspan="2">
57. <td>
58. <div>
59. <select name="moreselAge" id="move1"  multiple="multiple" size="7">
60. <option value="1">18-21sfiods</option>
61. <option value="2">22-25sjdfd</option>
62. <option value="3">26-29xxs</option>
63. <option value="4">30-35vs</option>
64. <option value="5">Over35dcff</option>
65. <option value="6">Over40shhfsd</option>
66. <option value="7">Over50sdefs</option>
67. <option value="8">Over88www</option>
68. </select>
69. </div>
70. </td>
71. <td width="100" align="center">
72. <input type="button" value=">" onclick = "rightSingle()" /><br>
73. <input type="button" value=">>" onclick = "rightAll()"/><br>
74. <input type="button" value="<" onclick = "leftSingle()"/><br>
75. <input type="button" value="<<" onclick = "leftAll()"/>
76. </td>
77. <td>
78. <div>
79. <select name="moreselAge" id="move2"  multiple="multiple" size="7">
80. <option value="1">18-21</option>
81. <option value="2">22-25</option>
82. <option value="3">26-29</option>
83. <option value="4">30-35</option>
84. <option value="5">Over35</option>
85. <option value="6">Over40</option>
86. <option value="7">Over50</option>
87. <option value="8">Over88</option>
88. </select>
89. </div>
90. </td>
91. <tr>
92. </table>
93. </body>
94. <script type="text/javascript">
95. //获得下拉列表对象
96. oListbox = document.getElementById("selectAge");
97. var ListUtil = new Object();
98. var selectbtn = document.getElementById("selectbtn");
99. function getSelAge (){
100. //訪问选项
101. alert(oListbox.options[1].firstChild.nodeValue); //显示的内容
102. alert(oListbox.options[1].getAttribute("value"));//相应的value
103. alert("获得它在集合中的位置== " + oListbox.options[2].index); //获得它在集合中的位置
104. alert("获得集合的元素个数长度== " + oListbox.options.length); //获得集合的元素个数长度
105. }
106. /*************************************************************************************************/
107. //获得选中选项
108. function getSelect(){
109. var indx = oListbox.selectedIndex;
110. alert("获得选中的选项的索引 "+ indx );
111. }
112. //多选下拉框
113. var moreselAgeList = document.getElementById("moreselAge");
114. /*******************************************************************/
115. //入參 下拉框对象
116. ListUtil.getSelectIndexes = function (oListbox){
117. var arrIndexes =  new Array();
118. for(var i=0 ; i<oListbox.options.length;i++){
119. //假设该项被选中则把该项相应的索引加入到数组中
120. if(oListbox.options[i].selected){
121. arrIndexes.push(i);
122. }
123. }
124. return  arrIndexes; //返回选中的选项索引
125. }
126. /***************************************************************/
127. // 多选
128. function moreSelect(){
129. var arrIndexes = ListUtil.getSelectIndexes(moreselAgeList);
130. alert("选中的数组length = "+ arrIndexes.length + " 选中的选项索引为 ："+ arrIndexes);
131. }
132. /************************加入新选项***************************************************************/
133. //
134. var addNewLisbox = document.getElementById("addNew"); //获得下拉框对象
135. var otxtName = document.getElementById("txtName");   //name 文本框
136. var otxtValue  = document.getElementById("txtValue"); //value 文本框
137. //加入方法
138. ListUtil.addOptions = function(oListbox,sName,sValue){
139. var arryV = new Array();
140. //标记输入的值能否够加入
141. var isAdd = false;
142. //推断是否有反复的值
143. for(var i =0 ;i<oListbox.options.length;i++){
144. var sv = oListbox.options[i].getAttribute("value");
145. if(sv == sValue){
146. alert("不能加入反复的value");
147. return ;
148. }else{
149. isAdd = true;
150. }
151. }
152. if(isAdd || oListbox.options.length == 0){
153. //以下使用dom方法创建节点
154. var oOption = document.createElement("option");// 创建option元素
155. oOption.appendChild(document.createTextNode(sName));
156. //由于选项的值不是必须的，所以假设传入了值 则加入进来
157. if(arguments.length == 3){
158. oOption.setAttribute("value",sValue);
159. }
160. oListbox.appendChild(oOption); //把选项加入进列表框
161. alert("加入成功!!");
162. }       // end if(isAdd)
163. }
164. //加入button的点击事件方法
165. function addNewSelections(){
166. var txtname = otxtName.value;
167. var txtvalue = otxtValue.value;
168. if(txtname != "" && txtvalue != ""){
169. ListUtil.addOptions(addNewLisbox,txtname,txtvalue);//加入新项
170. otxtName.value = "";
171. otxtValue.value = "";
172. }else{
173. alert("请输入要加入的值和name");
174. return;
175. }
176. }
177. /*******************删除选中选项****************************************************************/
178. //传入下拉框对象和(索引)
179. ListUtil.deleteOptons = function(oListbox){
180. var selIndex = oListbox.selectedIndex;
181. if(oListbox.options.length == 0){
182. alert("列表中无元素可删除");
183. return ;
184. }
185. oListbox.remove(selIndex); //删除选中的选项
186. }
187. //删除button点击事件
188. function deleteselections(){
189. ListUtil.deleteOptons(addNewLisbox);
190. }
191. /**********删除全部***********************************************************************/
192. ListUtil.deletsAllOptions = function(oListbox){
193. if(oListbox.options.length != 0){
194. for(var i= oListbox.options.length-1;i>=0;i--){  //倒着删除是由于
195. oListbox.remove(i);
196. }
197. }else{
198. alert("该列表为空!");
199. }
200. }
201. function deleteAllSelections(){
202. ListUtil.deletsAllOptions(addNewLisbox);
203. }
204. /*******移动选项***************************************************************************************/
205. //获得下拉框
206. var move1Listbox = document.getElementById("move1"); //左边下拉框
207. var move2Listbox = document.getElementById("move2"); //右边下拉框
208. //移动一个或多个选中的选项
209. ListUtil.move = function(oListboxFrom ,oListboxTo){
210. //var idx1 = oListboxFrom.selectedIndex;
211. var arrIndexes = ListUtil.getSelectIndexes(oListboxFrom);
212. var oOption ;
213. if(arrIndexes.length == 0 ){
214. alert("请选择至少一个选项!");
215. return ;
216. }else{
217. for(var i=oListboxFrom.options.length-1;i>=0;i--){
218. oOption = oListboxFrom.options[i];
219. if(oOption.selected && oOption != null ){
220. oListboxTo.appendChild(oOption);
221. }
222. }
223. }
224. }
225. //向右移 一个元素
226. function rightSingle(){
227. ListUtil.move(move1Listbox,move2Listbox);
228. };
229. //向左移 一个元素
230. function leftSingle(){
231. ListUtil.move(move2Listbox,move1Listbox);
232. }
233. ListUtil.moveAll = function(oListboxFrom,oListboxTo){
234. for(var i=oListboxFrom.options.length-1;i>=0;i--){
235. oOption = oListboxFrom.options[i];
236. //alert(oOption);
237. oListboxTo.appendChild(oOption);
238. }
239. }
240. //向右移全部选项
241. function rightAll(){
242. ListUtil.moveAll(move1Listbox,move2Listbox);
243. }
244. //向左移全部选项
245. function leftAll(){
246. ListUtil.moveAll(move2Listbox,move1Listbox);
247. }
248. </script>
249. </html>