软件开发培训班 >> 编程开发 >> JavaScript


解析Javascript对select下拉列表操作

　　本文标签：Javascript select

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

　　Javascript操作select下拉列表

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

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

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

　　举例:

  1. <selectidselectid="forasp_cn"name="forasp_cn"> 
  2. <optionvalueoptionvalue="http://www.forasp.cn/"selected>
  3. 网站制作学习网网址opiton> 
  4. <optionvalueoptionvalue="http://www.forasp.cn/yule/">
  5. 网站制作学习网娱乐网址opiton> 
  6. <optionvalueoptionvalue="http://www.forasp.cn/tool/">
  7. 网站制作学习网工具网址opiton> 
  8. select> 

　　js代码如下:

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

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

  1. alert(foraspobj.selectedIndex);//输出0  
  2. for(i=0;i<foraspobj.options.length;i++)  
  3. {  
  4. if(foraspobj.options[i].selected)  
  5. {  
  6. alert(foraspobj.options[i].text+
  7. "\n"+foraspobj.options[i].value);  
  8. //输出"网站制作学习网网址回车http://www.forasp.cn/"  
  9. break;  
  10. }  
  11. } 

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

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

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

　　Bom修改代码如下: 

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

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

　　t表示text值,v表示value值 

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

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

　　比如删除最后一个选项 

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