html select操作

最新推荐文章于 2024-09-10 13:54:44 发布
最新推荐文章于 2024-09-10 13:54:44 发布
阅读量469 收藏
点赞数
分类专栏： HTML Web
HTML 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
Web
2 篇文章 0 订阅
订阅专栏

html中的select标签，也是asp.net中的asp:DropDownList控件。 

javascript对它们的操作 
一、基础理解 

[js]  view plain copy
  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
  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
  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
  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
  1. function removeAll(){   
  2. var obj=document.getElementById('mySelect');   
  3. obj.options.length=0;   
  4. }  

4.删除一个选项option 
[js]  view plain copy
  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
  1. var obj=document.getElementById('mySelect');   
  2. var index=obj.selectedIndex; //序号，取当前选中选项的序号   
  3. var val = obj.options[index].value;  

6.获得选项option的文本 
[js]  view plain copy
  1. var obj=document.getElementById('mySelect');   
  2. var index=obj.selectedIndex; //序号，取当前选中选项的序号   
  3. var val = obj.options[index].text;  

7.修改选项option 
[js]  view plain copy
  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
  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
  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
  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>  

参考文档：http://www.jb51.net/w3school/htmldom/prop_select_selectedindex.htm

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

Walker_m
关注
专栏目录
js select option
07-30
NULL 博文链接：https://self4j.iteye.com/blog/842276
Html-select:用于操作 Select 组件的插件
07-01
用于操作 Select 组件的插件 这个 jQuery 插件允许操作 HTML 选择组件，这将在一些非常繁琐的任务中为我们节省大量工作，最初它具有以下特点： 选择一个选项 删除一个选项 通过发送 JSON 对象加载选项 加载传递 url...
js select option对象
持之以恒，每天进步一点点...
12-24 712
一基础理解: var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在标签中创建一个或多个文本 //options是个数组,里面可以存放多个文本这样的标签 1:options[ ]数组的属性: length属性--------
HTML5中下拉框标签`＜select＞`深入全面解析
最新发布
软考鸭
09-10 2949
下拉框作为HTML5表单的重要元素，其默认样式和功能可能无法满足所有开发者的需求。通过深入了解标签的属性、样式定制方法，以及结合CSS和JavaScript的高度定制技巧，开发者可以创建出符合项目需求、用户体验优良的下拉框组件。希望本文能为开发者在使用和定制下拉框时提供有益的参考。
js操作select的option
iteye_1601的博客
01-18 188
注意:Option中的O是要大写的，不然语法报错 1.动态创建select Javascript代码 function createSelect(){ Select = document.createElement("select"); mySelect.id = "mySelect"; document.body.append...
JS对select操作
weixin_34327761的博客
01-30 680
  1.动态创建select       function createSelect(){ var mySelect = document.createElement("select");          mySelect.id = "mySelect";           document.body.appendChild(mySelect);      } 2.添加选项option...
HTML中Select的使用详解
热门推荐
xiangsuixinsheng的专栏
11-08 12万+
//oSelect 列表的底部添加了一个新选项 function onload(){ var oOption = document.createElement("OPTION"); oOption.text="Ferrari"; oOption.value="4"; oSelect.add(oOption); } function fnChange(){ oData.value+=
jQuery中的select操作详解
01-19
下面给大介绍了jquery对select的操作介绍，非常不错，具有内容介绍如下所示： select的html标签如下： <select class=xxx id=yyy><option></option>...<option></option></select> 1.设置value为“lll...
封装html的select标签的js操作实例
12-09
这些封装的JavaScript函数大大简化了对HTML`select`元素的操作，使得在动态更新下拉列表时更加方便，提高了代码的可读性和可维护性。在实际项目中，这样的封装可以帮助开发者更高效地处理数据绑定、选项的增删改查等...
三级下拉列表 select 网页 html5
03-29
在HTML5中，这种复杂的下拉列表通常结合`<select>`标签、JavaScript（JS）以及可能的CSS来实现。下面将详细介绍如何构建一个三级联动的下拉列表。 首先，我们要理解HTML5的`<select>`标签。`<select>`标签用于创建...
JS对HTML标签select的获取、添加、删除操作
10-26
在JavaScript中，对HTML元素的操作是网页动态交互的基础，尤其是对于`<select>`这样的选择框，它在数据输入和用户交互中扮演着重要角色。在本文中，我们将深入探讨如何使用JavaScript来获取、添加和删除`<select>`...
JS操作select
dianlvedi1663的博客
06-11 211
<select id="ddlResourceType" onchange="getvalue(this)"></select> 动态删除select中的所有options： document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项o...
js操作select option
︶ㄣ煋夜宸べ
12-28 94
[size=large]1、获取选中select的value和text,html代码如下： one two three 则可通过以下script代码s来获取选中的value和text $("#mySelect").val(); //获取选中记录的value值 $("#mySelect option:selected").text(); //获取选中记录的text值 或var ...
JS & JQuery 动态添加 select option
weixin_30814319的博客
03-30 127
JS： var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i); } sid.options[sid.options.length]=new Option("1","2"); // 在最后一个值后面添加多一个 ...
js控制select的option
qsfwy的专栏
01-05 231
js控制select的option JS   select里添加一条OPTION &lt;select id="abc"&gt; &lt;option&gt;&lt;/option&gt; &lt;/select&gt; &lt;input type="button" name="button" value="按钮" onclick="dd
利用js给select添加option并选中该option
lihaimin的专栏
10-09 246
&lt;script&gt; function addOptionToSelect() { var slt=document.getElementById("slt"); var objOption=document.createElement("OPTION"); objOption.value='6'; objOption.text='content'; ...
HTML select 用法及常用事件
sout-lanys
07-03 4507
用于记录开发中常用到的，快捷开发后续用到的我会继续写进去，如果有大佬遇到其他常用的，欢迎评论。
Js select option
weixin_30895603的博客
03-26 73
Java代码 <selectid="id"> <optionvalue="1">你好</option> </select> vari=document.getElementById("id"); document.getElementById("id").options[i.selectInd...
select options 相关的js函数
hoppboy的专栏
09-14 3573
javascript操作Select标记中options集合 分类:JAVASCRIPT先来看看options集合的这几个方法： options.add(option)方法向集合里添加一项option对象； options.remove(index)方法移除options集合中的指定项； options(index)或options.item(index)可以通过索引获取options集合的
HTML select option详解：创建、操作与属性
在JavaScript中，我们可以通过`options`属性来操作`<select>`元素中的`<option>`。`options`是一个数组，可以存储多个`<option>`元素。例如，`e.options`就是`<select>`元素`options`数组的引用。我们可以使用`new ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值