1 javascript之HTML（select option）详解
2 一、基础理解:
3
4 var e = document.getElementById("selectId");
5
6 e. options= new Option("文本","值") ;
7
8 //创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option>
9
10 //options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签
11
12 1:options[ ]数组的属性:
13
14 length属性---------长度属性
15
16 selectedIndex属性--------当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3.....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值..........)
17
18 2:单个option的属性(---obj.options[obj.selecedIndex]是指定的某个<option>标签,是一个---)
19
20 text属性---------返回/指定 文本
21
22 value属性------返回/指定 值，与<options value="...">一致。
23
24 index属性-------返回下标,
25
26 selected 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false，可以动态的改变选中项
27
28 defaultSelected 属性-----返回该对象默认是否被选中。true / false。
29
30 3:option的方法
31
32 增加一个<option>标签-----obj.options.add(new("文本","值"));<增>
33
34 删除一个<option>标签-----obj.options.remove(obj.selectedIndex)<删>
35
36 获得一个<option>标签的文本-----obj.options[obj.selectedIndex].text<查>
37
38 修改一个<option>标签的值-----obj.options[obj.selectedIndex]=new Option("新文本","新值")<改>
39
40 删除所有<option>标签-----obj.options.length = 0
41
42 获得一个<option>标签的值-----obj.options[obj.selectedIndex].value
43
44 注意:
45
46 a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效.
47
48 b:obj.option中的option不需要大写,new Option中的Option需要大写
49
50 二 、应用
51
52 <html>
53 <head>
54 <script language="javascript">
55 function number(){
56 var obj = document.getElementById("mySelect");
57 //obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变
58 //obj.options.add(new Option("我的吃吃","4"));再添加一个option
59 //alert(obj.selectedIndex);//显示序号，option自己设置的
60 //obj.options[obj.selectedIndex].text = "我的吃吃";更改值
61 //obj.remove(obj.selectedIndex);删除功能
62 }
63 </script>
64 </head>
65 <body>
66 <select id="mySelect">
67 <option>我的包包</option>
68 <option>我的本本</option>
69 <option>我的油油</option>
70 <option>我的担子</option>
71 </select>
72 <input type="button" name="button" value="查看结果" onclick="number();">
73 </body>
74 </html>
75
76 1.动态创建select
77
78 function createSelect(){
79
80 var mySelect = document.createElement("select");
81 mySelect.id = "mySelect";
82 document.body.appendChild(mySelect);
83 }
84
85 2.添加选项option
86
87 function addOption(){
88
89 //根据id查找对象，
90 var obj=document.getElementById('mySelect');
91
92 //添加一个选项
93 obj.add(new Option("文本","值")); //这个只能在IE中有效
94 obj.options.add(new Option("text","value")); //这个兼容IE与firefox
95 }
96
97 3.删除所有选项option
98
99 function removeAll(){
100 var obj=document.getElementById('mySelect');
101
102 obj.options.length=0;
103
104 }
105
106 4.删除一个选项option
107
108 function removeOne(){
109 var obj=document.getElementById('mySelect');
110
111 //index,要删除选项的序号，这里取当前选中选项的序号
112
113 var index=obj.selectedIndex;
114 obj.options.remove(index);
115 }
116
117 5.获得选项option的值
118
119 var obj=document.getElementById('mySelect');
120
121 var index=obj.selectedIndex; //序号，取当前选中选项的序号
122
123 var val = obj.options[index].value;
124
125 6.获得选项option的文本
126
127 var obj=document.getElementById('mySelect');
128
129 var index=obj.selectedIndex; //序号，取当前选中选项的序号
130
131 var val = obj.options[index].text;
132
133 7.修改选项option
134
135 var obj=document.getElementById('mySelect');
136
137 var index=obj.selectedIndex; //序号，取当前选中选项的序号
138
139 var val = obj.options[index]=new Option("新文本","新值");
140
141 8.删除select
142
143 function removeSelect(){
144 var mySelect = document.getElementById("mySelect");
145 mySelect.parentNode.removeChild(mySelect);
146 }
147
148 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
149 <html>
150 <head>
151 <meta http-equiv="Content-Type" content="text/html">
152 <head>
153 <script language=JavaScript>
154 function $(id)
155 {
156 return document.getElementById(id)
157 }
158
159 function show()
160 {
161 var selectObj=$("area")
162 var myOption=document.createElement("option")
163 myOption.setAttribute("value","10")
164 myOption.appendChild(document.createTextNode("上海"))
165
166 var myOption1=document.createElement("option")
167 myOption1.setAttribute("value","100")
168 myOption1.appendChild(document.createTextNode("南京"))
169
170 selectObj.appendChild(myOption)
171 selectObj.appendChild(myOption1)
172
173 }
174
175 function choice()
176 {
177 var index=$("area").selectedIndex;
178 var val=$("area").options[index].getAttribute("value")
179
180 if(val==10)
181 {
182 var i=$("context").childNodes.length-1;
183 var remobj=$("context").childNodes[i];
184 remobj.removeNode(true)
185 var sh=document.createElement("select")
186 sh.add(new Option("浦东新区","101"))
187 sh.add(new Option("黄浦区","102"))
188 sh.add(new Option("徐汇区","103"))
189 sh.add(new Option("普陀区","104"))
190 $("context").appendChild(sh)
191
192 }
193
194 if(val==100)
195 {
196 var i=$("context").childNodes.length-1;
197 var remobj=$("context").childNodes[i];
198 remobj.removeNode(true)
199 var nj=document.createElement("select")
200 nj.add(new Option("玄武区","201"))
201 nj.add(new Option("白下区","202"))
202 nj.add(new Option("下关区","203"))
203 nj.add(new Option("栖霞区","204"))
204 $("context").appendChild(nj)
205 }
206 }
207
208 function calc()
209 {
210 var x=$("context").childNodes.length-1;
211 alert(x)
212
213 }
214
215 function remove()
216 {
217 var i=$("context").childNodes.length-1;
218 var remobj=$("context").childNodes[i];
219 remobj.removeNode(true)
220 }
221 </script>
222 <body>
223
224 <div id="context">
225 <select id="area" on
226 change="choice()">
227 </select>
228 </div>
229 <input type=button value="显示" onclick="show()">
230 <input type=button value="计算结点" onclick="calc()">
231 <input type=button value="删除" onclick="remove()">
232 </body>
233 </html>
234
235
236
237 根据这些东西,自己用JQEURY AJAX+JSON实现了一个小功能如下:
238
239 JS代码:(只取了于SELECT相关的代码)
240 /**
241 * @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现)
242 * @prarm selectId 下拉列表的ID
243 * @prarm method 要调用的方法名称
244 * @prarm temp 此处存放软件ID
245 * @prarm url 要跳转的地址
246 */
247 function linkAgeJson(selectId,method,temp,url){
248 $j.ajax({
249 type: "get",//使用get方法访问后台
250 dataType: "json",//返回json格式的数据
251 url: url,//要访问的后台地址
252 data: "method=" + method+"&temp="+temp,//要发送的数据
253 success: function(msg){//msg为返回的数据，在这里做数据绑定
254 var data = msg.lists;
255 coverJsonToHtml(selectId,data);
256 }
257 });
258 }
259
260 /**
261 * @description 将JSON数据转换成HTML数据格式
262 * @prarm selectId 下拉列表的ID
263 * @prarm nodeArray 返回的JSON数组
264 *
265 */
266 function coverJsonToHtml(selectId,nodeArray){
267 //get select
268 var tempSelect=$j("#"+selectId);
269 //clear select value
270 isClearSelect(selectId,'0');
271 var tempOption=null;
272 for(var i=0;i<nodeArray.length;i++){
273 //create select Option
274 tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
275 //put Option to select
276 tempSelect.append(tempOption);
277 }
278 // 获取退化构件列表
279 getCpgjThgl(selectId,'thgjDm');
280 }
281 /**
282 * @description 清空下拉列表的值
283 * @prarm selectId 下拉列表的ID
284 * @prarm index 开始清空的下标位置
285 */
286 function isClearSelect(selectId,index){
287 var length=document.getElementById(selectId).options.length;
288 while(length!=index){
289 //长度是在变化的，因为必须重新获取
290 length=document.getElementById(selectId).options.length;
291 for(var i=index;i<length;i++)
292 document.getElementById(selectId).options.remove(i);
293 length=length/2;
294 }
295 }
296
297 /**
298 * @description 获取退化构件列表
299 * @prarm selectId1 引用软件下拉列表的ID
300 * @prarm selectId2 退化构件下拉列表的ID
301 */
302 function getCpgjThgl(selectId1,selectId2){
303 var obj1=document.getElementById(selectId1);//引用软件下拉列表
304 var obj2=document.getElementById(selectId2);//退化构件下拉列表
305 var len=obj1.options.length;
306 //当引用软件列表长度等于1时返回，不做操作
307 if(len==1){
308 return false;
309 }
310 //清空下拉列表的值，两种方式都可以
311 // isClearSelect(selectId2,'1');
312 document.getElementById(selectId2).length=1;
313 for(var i=0;i<len; i++){
314 var option= obj1.options[i];
315 //引用软件被选中项不加入
316 if(i!=obj1.selectedIndex){
317 //克隆OPTION并添加到SELECT中
318 obj2.appendChild(option.cloneNode(true));
319 }
320 }
321
322 }
323
324
325
326
327 HTML代码:
328
329 <TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1>
330 <tr>
331 <td class="Search_item_18"> <span class="Edit_mustinput">*</span>引用软件：</td>
332 <td class="Search_content_82">
333 <input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" >
334 <input name="yyrjDm" id="yyrjDm" type="hidden" >
335 <input type="button" class="Search_button_select"
336 onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择...">
337 </td>
338 </tr>
339 <tr>
340 <td class="Search_item"> <span class="Edit_mustinput">*</span>引用分版：</td>
341 <td class="Search_content" id="yyfb">
342 <select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
343
344 </select>
345 </td>
346 </tr>
347 <tr>
348 <td class="Search_item">退化构件：</td>
349 <td class="Search_content" id="thgj">
350 <select name="thgjDm" style="width:160" id="thgjDm">
351 <option value="-1" selected>无</option>
352 </select>
353 </td>
354 </tr>
355 </TABLE>
