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>