html select操作

小鱼儿 2022-06-13 02:53 175阅读 0赞

参考文档：http://www.jb51.net/w3school/htmldom/prop\_select\_selectedindex.htm

原文地址：http://www.lai18.com/content/358528.html

html中的select标签，也是asp.net中的asp:DropDownList控件。   
javascript对它们的操作   
一、基础理解

**\[js\]** [view plain][] [copy][view plain]

1.  **var** e = document.getElementById("selectId"); 
2.  e. options= **new** Option("文本","值") ; 
3.  //创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option> 
4.  //options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签

1:options\[ \]数组的属性:   
length属性---------长度属性   
selectedIndex属性--------当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3.....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值..........)   
2:单个option的属性(---obj.options\[obj.selecedIndex\]是指定的某个<option>标签,是一个---)   
text属性---------返回/指定 文本   
value属性------返回/指定 值，与<options value="...">一致。   
index属性-------返回下标,   
selected 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false，可以动态的改变选中项   
defaultSelected 属性-----返回该对象默认是否被选中。true / false。   
3:option的方法   
增加一个<option>标签-----obj.options.add(new("文本","值"));<增>   
删除一个<option>标签-----obj.options.remove(obj.selectedIndex)<删>   
获得一个<option>标签的文本-----obj.options\[obj.selectedIndex\].text<查>   
修改一个<option>标签的值-----obj.options\[obj.selectedIndex\]=new Option("新文本","新值")<改>   
删除所有<option>标签-----obj.options.length = 0   
获得一个<option>标签的值-----obj.options\[obj.selectedIndex\].value   
注意:   
a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效.   
b:obj.option中的option不需要大写,new Option中的Option需要大写   
二 、应用

**\[js\]** [view plain][] [copy][view plain]

1.  <html> 
2.  <head> 
3.  <script language="javascript"> 
4.  **function** number()\{ 
5.  **var** obj = document.getElementById("mySelect"); 
6.  //obj.options\[obj.selectedIndex\] = new Option("我的吃吃","4");//在当前选中的那个的值中改变 
7.  //obj.options.add(new Option("我的吃吃","4"));再添加一个option 
8.  //alert(obj.selectedIndex);//显示序号，option自己设置的 
9.  //obj.options\[obj.selectedIndex\].text = "我的吃吃";更改值 
10. //obj.remove(obj.selectedIndex);删除功能 
11. \} 
12. </script> 
13. </head> 
14. <body> 
15. <select id="mySelect"> 
16. <option>我的包包</option> 
17. <option>我的本本</option> 
18. <option>我的油油</option> 
19. <option>我的担子</option> 
20. </select> 
21. <input type="button" name="button" value="查看结果" οnclick="number();"> 
22. </body> 
23. </html>

1.动态创建select

**\[js\]** [view plain][] [copy][view plain]

1.  **function** createSelect()\{ 
2.  **var** mySelect = document.createElement("select"); 
3.  mySelect.id = "mySelect"; 
4.  document.body.appendChild(mySelect); 
5.  \}

2.添加选项option

**\[js\]** [view plain][] [copy][view plain]

1.  **function** addOption()\{ 
2.  //根据id查找对象， 
3.  **var** obj=document.getElementById('mySelect'); 
4.  //添加一个选项 
5.  obj.add(**new** Option("文本","值")); //这个只能在IE中有效 
6.  obj.options.add(**new** Option("text","value")); //这个兼容IE与firefox 
7.  \}

3.删除所有选项option

**\[js\]** [view plain][] [copy][view plain]

1.  **function** removeAll()\{ 
2.  **var** obj=document.getElementById('mySelect'); 
3.  obj.options.length=0; 
4.  \}

4.删除一个选项option

**\[js\]** [view plain][] [copy][view plain]

1.  **function** removeOne()\{ 
2.  **var** obj=document.getElementById('mySelect'); 
3.  //index,要删除选项的序号，这里取当前选中选项的序号 
4.  **var** index=obj.selectedIndex; 
5.  obj.options.remove(index); 
6.  \}

5.获得选项option的值

**\[js\]** [view plain][] [copy][view plain]

1.  **var** obj=document.getElementById('mySelect'); 
2.  **var** index=obj.selectedIndex; //序号，取当前选中选项的序号 
3.  **var** val = obj.options\[index\].value;

6.获得选项option的文本

**\[js\]** [view plain][] [copy][view plain]

1.  **var** obj=document.getElementById('mySelect'); 
2.  **var** index=obj.selectedIndex; //序号，取当前选中选项的序号 
3.  **var** val = obj.options\[index\].text;

7.修改选项option

**\[js\]** [view plain][] [copy][view plain]

1.  **var** obj=document.getElementById('mySelect'); 
2.  **var** index=obj.selectedIndex; //序号，取当前选中选项的序号 
3.  **var** val = obj.options\[index\]=**new** Option("新文本","新值");

8.删除select

**\[js\]** [view plain][] [copy][view plain]

1.  **function** removeSelect()\{ 
2.  **var** mySelect = document.getElementById("mySelect"); 
3.  mySelect.parentNode.removeChild(mySelect); 
4.  \} 
5.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN""http://www.w3.org/TR/html4/strict.dtd"> 
6.  <html> 
7.  <head> 
8.  <meta http-equiv="Content-Type" content="text/html"> 
9.  <head> 
10. <script language=JavaScript> 
11. **function** $(id) 
12. \{ 
13. **return** document.getElementById(id) 
14. \} 
15. **function** show() 
16. \{ 
17. **var** selectObj=$("area") 
18. **var** myOption=document.createElement("option") 
19. myOption.setAttribute("value","10") 
20. myOption.appendChild(document.createTextNode("上海")) 
21. **var** myOption1=document.createElement("option") 
22. myOption1.setAttribute("value","100") 
23. myOption1.appendChild(document.createTextNode("南京")) 
24. selectObj.appendChild(myOption) 
25. selectObj.appendChild(myOption1) 
26. \} 
27. **function** choice() 
28. \{ 
29. **var** index=$("area").selectedIndex; 
30. **var** val=$("area").options\[index\].getAttribute("value") 
31. **if**(val==10) 
32. \{ 
33. **var** i=$("context").childNodes.length-1; 
34. **var** remobj=$("context").childNodes\[i\]; 
35. remobj.removeNode(**true**) 
36. **var** sh=document.createElement("select") 
37. sh.add(**new** Option("浦东新区","101")) 
38. sh.add(**new** Option("黄浦区","102")) 
39. sh.add(**new** Option("徐汇区","103")) 
40. sh.add(**new** Option("普陀区","104")) 
41. $("context").appendChild(sh) 
42. \} 
43. **if**(val==100) 
44. \{ 
45. **var** i=$("context").childNodes.length-1; 
46. **var** remobj=$("context").childNodes\[i\]; 
47. remobj.removeNode(**true**) 
48. **var** nj=document.createElement("select") 
49. nj.add(**new** Option("玄武区","201")) 
50. nj.add(**new** Option("白下区","202")) 
51. nj.add(**new** Option("下关区","203")) 
52. nj.add(**new** Option("栖霞区","204")) 
53. $("context").appendChild(nj) 
54. \} 
55. \} 
56. **function** calc() 
57. \{ 
58. **var** x=$("context").childNodes.length-1; 
59. alert(x) 
60. \} 
61. **function** remove() 
62. \{ 
63. **var** i=$("context").childNodes.length-1; 
64. **var** remobj=$("context").childNodes\[i\]; 
65. remobj.removeNode(**true**) 
66. \} 
67. </script> 
68. <body><div id="context"> 
69. <select id="area" on 
70. change="choice()"> 
71. </select> 
72. </div> 
73. <input type=button value="显示" οnclick="show()"> 
74. <input type=button value="计算结点" οnclick="calc()"> 
75. <input type=button value="删除" οnclick="remove()"> 
76. </body> 
77. </html>

根据这些东西,自己用JQEURY AJAX+JSON实现了一个小功能如下:   
JS代码:(只取了于SELECT相关的代码)

**\[js\]** [view plain][] [copy][view plain]

1.  /\*\* 
2.  \* @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现) 
3.  \* @prarm selectId 下拉列表的ID 
4.  \* @prarm method 要调用的方法名称 
5.  \* @prarm temp 此处存放软件ID 
6.  \* @prarm url 要跳转的地址 
7.  \*/
8.  **function** linkAgeJson(selectId,method,temp,url)\{ 
9.  $j.ajax(\{ 
10. type: "get",//使用get方法访问后台 
11. dataType: "json",//返回json格式的数据 
12. url: url,//要访问的后台地址 
13. data: "method=" \+ method+"&temp="\+temp,//要发送的数据 
14. success: **function**(msg)\{ //msg为返回的数据，在这里做数据绑定 
15. **var** data = msg.lists; 
16. coverJsonToHtml(selectId,data); 
17. \} 
18. \}); 
19. \} 
20. /\*\* 
21. \* @description 将JSON数据转换成HTML数据格式 
22. \* @prarm selectId 下拉列表的ID 
23. \* @prarm nodeArray 返回的JSON数组 
24. \* 
25. \*/
26. **function** coverJsonToHtml(selectId,nodeArray)\{ 
27. //get select 
28. **var** tempSelect=$j("\#"\+selectId); 
29. //clear select value 
30. isClearSelect(selectId,'0'); 
31. **var** tempOption=**null**; 
32. **for**(**var** i=0;i<nodeArray.length;i++)\{ 
33. //create select Option 
34. tempOption= $j('<option value="'\+nodeArray\[i\].dm+'">'\+nodeArray\[i\].mc+'</option> '); 
35. //put Option to select 
36. tempSelect.append(tempOption); 
37. \} 
38. // 获取退化构件列表 
39. getCpgjThgl(selectId,'thgjDm'); 
40. \} 
41. /\*\* 
42. \* @description 清空下拉列表的值 
43. \* @prarm selectId 下拉列表的ID 
44. \* @prarm index 开始清空的下标位置 
45. \*/
46. **function** isClearSelect(selectId,index)\{ 
47. **var** length=document.getElementById(selectId).options.length; 
48. **while**(length!=index)\{ 
49. //长度是在变化的，因为必须重新获取 
50. length=document.getElementById(selectId).options.length; 
51. **for**(**var** i=index;i<length;i++) 
52. document.getElementById(selectId).options.remove(i); 
53. length=length/2; 
54. \} 
55. \} 
56. /\*\* 
57. \* @description 获取退化构件列表 
58. \* @prarm selectId1 引用软件下拉列表的ID 
59. \* @prarm selectId2 退化构件下拉列表的ID 
60. \*/
61. **function** getCpgjThgl(selectId1,selectId2)\{ 
62. **var** obj1=document.getElementById(selectId1);//引用软件下拉列表 
63. **var** obj2=document.getElementById(selectId2);//退化构件下拉列表 
64. **var** len=obj1.options.length; 
65. //当引用软件列表长度等于1时返回，不做操作 
66. **if**(len==1)\{ 
67. **return****false**; 
68. \} 
69. //清空下拉列表的值，两种方式都可以 
70. // isClearSelect(selectId2,'1'); 
71. document.getElementById(selectId2).length=1; 
72. **for**(**var** i=0;i<len; i++)\{ 
73. **var** option= obj1.options\[i\]; 
74. //引用软件被选中项不加入 
75. **if**(i!=obj1.selectedIndex)\{ 
76. //克隆OPTION并添加到SELECT中 
77. obj2.appendChild(option.cloneNode(**true**)); 
78. \} 
79. \} 
80. \}

HTML代码:

**\[js\]** [view plain][] [copy][view plain]

1.  <TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1> 
2.  <tr> 
3.  <td **class**="Search\_item\_18"> <span **class**="Edit\_mustinput">\*</span>引用软件：</td> 
4.  <td **class**="Search\_content\_82"> 
5.  <input name="yyrjMc" id="yyrjMc" type="text"**class**="Search\_input" tabindex="3" size="30" > 
6.  <input name="yyrjDm" id="yyrjDm" type="hidden" > 
7.  <input type="button"**class**="Search\_button\_select"
8.  onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择..."> 
9.  </td> 
10. </tr> 
11. <tr> 
12. <td **class**="Search\_item"> <span **class**="Edit\_mustinput">\*</span>引用分版：</td> 
13. <td **class**="Search\_content" id="yyfb"> 
14. <select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')"> 
15. </select> 
16. </td> 
17. </tr> 
18. <tr> 
19. <td **class**="Search\_item">退化构件：</td> 
20. <td **class**="Search\_content" id="thgj"> 
21. <select name="thgjDm" style="width:160" id="thgjDm"> 
22. <option value="-1" selected>无</option> 
23. </select> 
24. </td> 
25. </tr> 
26. </TABLE>

[view plain]: http://www.lai18.com/content/358528.html#

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关 html select onchange 失效

html select onchange 失效问题描述解决方案问题描述想要监听 select 切换选项后执行一些操作，比如全换选项后清空其他输

亦凉/ 2023年01月16日 04:56/ 0 赞/ 182 阅读

相关 html select插件,html select美化模拟jquery插件select2.js

select2.js是一个html select美化模拟类jquery插件，但是select2.js又远非简单的模拟美化那么简单，它还具有搜索功能，多选功能(可限制选择数量)，

川长思鸟来/ 2022年10月06日 13:50/ 0 赞/ 215 阅读

相关 jq select操作

添加option $ ( "\ID option" ). each ( function ( ) \{ if ($ ( this ). val ( ) == 111 )

朴灿烈づ我的快乐病毒、/ 2022年08月26日 13:10/ 0 赞/ 186 阅读

相关 thinkphp查询select操作

读取（Read）在ThinkPHP中读取数据的方式很多，通常分为读取数据和读取数据集。读取数据集使用select方法（新版已经废除原来的findall方法）：

谁践踏了优雅/ 2022年08月20日 02:17/ 0 赞/ 776 阅读

相关 html select操作

参考文档：http://www.jb51.net/w3school/htmldom/prop\_select\_selectedindex.htm 原文地

小鱼儿/ 2022年06月13日 02:53/ 0 赞/ 176 阅读

相关 JQuery 操作select

jQuery获取Select选择的Text和Value： var checkText=$("select_id").find("option:selected").t

心已赠人/ 2022年05月27日 02:56/ 0 赞/ 209 阅读

相关 jquery操作select

一、jquery操作select(增加) 1. $("select_id").append("<option value='Value'>Text</optio

旧城等待，/ 2021年12月09日 00:47/ 0 赞/ 326 阅读

相关通过JavaScript操作HTML中select标签

添加： Js代码 1.function selectChange() 2.\{ 3. var sel=document.getElementById(

骑猪看日落/ 2021年09月19日 14:32/ 0 赞/ 291 阅读

相关 HTML select option 详解

javascript之HTML（select option）详解一、基础理解: var e = document.getElementById(“selectId”...

灰太狼/ 2021年01月27日 16:05/ 1 赞/ 774 阅读

相关 HTML select 下拉列表

select 下拉列表由 `< select>` 和 `< option>` 标签配合使用生成。下拉列表控件提供可供选择的项，可以选中其中的一项或者多项。

小灰灰/ 2020年05月16日 17:43/ 0 赞/ 877 阅读