解析Javascript对select下拉列表操作

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

创新互联建站主要业务有网站营销策划、成都网站制作、成都做网站、微信公众号开发、小程序定制开发、H5建站、程序开发等业务。一次合作终身朋友，是我们奉行的宗旨；我们不仅仅把客户当客户，还把客户视为我们的合作伙伴，在开展业务的过程中，公司还积累了丰富的行业经验、全网营销推广资源和合作伙伴关系资源，并逐渐建立起规范的客户服务和保障体系。

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;}

新闻标题：解析Javascript对select下拉列表操作
网站URL：http://www.36103.cn/qtweb/news21/13271.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容