网站制作学习网JS脚本→正文:javascript操作select下拉列表
字体:

javascript操作select下拉列表

JS脚本 2010/4/21 14:51:30  点击:不统计

<本文原载于www.forasp.cn>

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

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

1.首先是访问select的option.select定义了options的集合,可以通过元素集合来访问.
举例:
<select id="forasp_cn" name = "forasp_cn">
<option value="http://www.forasp.cn/" selected>网站制作学习网网址</opiton>
<option value="http://www.forasp.cn/yule/">网站制作学习网娱乐网址</opiton>
<option value="http://www.forasp.cn/tool/">网站制作学习网工具网址</opiton>
</select>
js代码如下:
var foraspobj = document.getElementById("forasp_cn")
var option_num = foraspobj.options.length;//获取option的个数,目前输出3
Dom下获取select的option取显示文本值和value值
var option_text1 = foraspobj.options[0].firstChild.nodeValue;//输出"网站制作学习网网址"
var option_value1 = foraspobj.options[0].getAttribute("value");//输出"http://www.forasp.cn/"
Bom下获取select的option显示文本值和value值
var option_text1 = foraspobj.option[0].text;//输出同上
var option_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值
var temp_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;}

下一节我们学习,更改option的顺序.这次就说到这里,http://www.forasp.cn/转载请注明


%77w%77%2E%66%6F%72%61%73%70%2E%63%6E

·上一篇:javascript获取按键值 >>    ·下一篇:javascript操作select下拉列表option顺序 >>
推荐文章
最新文章