本篇文章给大家分享的是有关javascript中怎么操作select下拉列表,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。Javascript
本篇文章给大家分享的是有关javascript中怎么操作select下拉列表,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
Javascript操作select下拉列表
javascript操作select下拉表,包括读取select内容,序号,选择值,还有添加option内容,修改option内容,改变option顺序.
查看整体效果:javascript操作select下拉列表
1.首先是访问select的option.select定义了options的集合,可以通过元素集合来访问.
举例:
<selectidselectid="forasp_cn"name="forasp_cn"> <optionvalueoptionvalue="Http://www.forasp.cn/"selected>网站制作学习网网址</opiton> <optionvalueoptionvalue="http://www.forasp.cn/yule/">网站制作学习网娱乐网址</opiton> <optionvalueoptionvalue="http://www.forasp.cn/tool/">网站制作学习网工具网址</opiton> </select>
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<foraspobj.options.length;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下拉列表,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网node.js频道。
--结束END--
本文标题: Javascript中怎么操作select下拉列表
本文链接: https://www.lsjlt.com/news/73258.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0