| 标题 | javascript操作下拉列表 |
| 范文 | javascript操作select下拉表,包括读取select内容,序号,选择值,还有添加option内容,修改option内容,改变option顺序. 查看整体效果:javascript操作select下拉列表 1.首先是访问select的option.select定义了options的集合,可以通过元素集合来访问. 举例: <select id=forasp_cn name = forasp_cn> <option value=http://www.ynpxrz.com/ selected>网站制作学习网网址</opiton> <option value=http://www.ynpxrz.com/yule/>网站制作学习网娱乐网址</opiton> <option value=http://www.ynpxrz.com/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.ynpxrz.com/ 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.ynpxrz.com/ break; } } 3.修改select的option的value和text. 假设把第一个 text显示值修改为http://www.ynpxrz.com/ value值修改为网站制作学习网 dom修改代码如下: 代码如下: foraspobj.options[0].firstchild.nodevalue= http://www.ynpxrz.com; foraspobj.options[0].setattribute(value,网站制作学习网); bom修改代码如下: 代码如下: foraspobj.options[0].text = http://www.ynpxrz.com; 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;} |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。