你知道Javascript中如何操作select下拉列表的吗，这里和大家分享一下，相信本文介绍一定会让你有所收获。

Javascript操作select下拉列表

javascript操作select下拉表,包括读取select内容,序号,选择值,还有添加option内容,修改option内容,改变option顺序.

查看整体效果:javascript操作select下拉列表

1.首先是访问select的option.select定义了options的集合,可以通过元素集合来访问.

举例:

 
网站制作学习网网址 
网站制作学习网娱乐网址 
网站制作学习网工具网址 
 

js代码如下:

varforaspobj=document.getElementById("forasp_cn")  
varoption_num=foraspobj.options.length;  
//获取option的个数,目前输出3  
Dom下获取select的option取显示文本值和value值  
varoption_text1=foraspobj.options[0].firstChild.nodeValue;
//输出"网站制作学习网网址"  
varoption_value1=foraspobj.options[0].getAttribute("value");
//输出"http://www.forasp.cn/"  
Bom下获取select的option显示文本值和value值  
varoption_text1=foraspobj.option[0].text;//输出同上  
varoption_text1=foraspobj.option[0].value;//输出同上 

2.获取select下面的目前选中的option的text和value值.select还有一个特殊的特性selectedIndex,它是目前选中选项的索引

alert(foraspobj.selectedIndex);//输出0  
for(i=0;i
{  
if(foraspobj.options[i].selected)  
{  
alert(foraspobj.options[i].text+
"\n"+foraspobj.options[i].value);  
//输出"网站制作学习网网址回车http://www.forasp.cn/"  
break;  
}  
} 

3.修改select的option的value和text.

假设把***个text显示值修改为http://www.forasp.cn/value值修改为网站制作学习网
Dom修改代码如下: 

foraspobj.options[0].firstChild.nodeValue="http://www.forasp.cn";  
 
foraspobj.options[0].setAttribute("value","网站制作学习网"); 

Bom修改代码如下: 

foraspobj.options[0].text="http://www.forasp.cn";  
foraspobj.options[0].value="网站制作学习网"; 

4.添加选项,通过函数来添加select的option选项

t表示text值,v表示value值 

vartemp_option=document.createElement("option");  
//创建临时option  
temp_option.appendChild(document.createTextNode("新增加内容"));  
//给option创建子文本节点  
temp_option.setAttribute("value","新增加值");  
//给opiton赋值  
foraspobj.appendChild(temp_option)  
//将option附加到父类中 

5.删除选项,删除select的option,直接用对应的option对象等于空即可

比如删除***一个选项 

if(foraspobj.options.length>0)  
{foraspobj.options[foraspobj.options.length-1]=null;} 

【编辑推荐】

1. 盘点JavaScript中Function三大用途
2. JS中Array数组的三大属性用法揭秘
3. 详解JavaScript中Object对象用法
4. Javascript数组创建及其常见操作
5. JavaScript调试工具解决IE6等多版本共存问题