JS如何获取、设置、删除、添加 select下拉菜单的value以及文本内容

您所在的位置：网站首页 › js怎么把值输入文本框的内容 › JS如何获取、设置、删除、添加 select下拉菜单的value以及文本内容

JS如何获取、设置、删除、添加 select下拉菜单的value以及文本内容

2024-06-18 00:25| 来源: 网络整理| 查看: 265

html代码：

书籍分类: 教学类技术类

JS：

window.onload = function(){ //首先获得下拉框的节点对象； var select = document.getElementById("s1"); //设置默认选中项目 select[1].selected=true; //1.如何获得当前选中的值？： var value = select.value; //2.如何获得该下拉框所有的option的节点对象 var options = select.options; //注意：得到的options是一个对象数组 //3.如何获得第几个option的value值?比如我要获取第一option的value,可以这样： var value1 = options[0].value;//1 //4.如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样： var text1 = options[0].text;//教学类 //5.如何获得当前选中的option的索引？ var index = select.selectedIndex; //6.如何获得当前选中的option的文本内容？ //从第2个问题，我们已经获得所有的option的对象数组options了 //又从第5个问题，我们获取到了当前选中的option的索引值 //所以我们只要同options[index]下标的方法得到当前选中的option了 var selectedText = options[index].text; // 当然还可以这样写： var currentIndex = select.selectedIndex; var currentText = (select[currentIndex].text); } 动态删除select中的所有options： document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option： document.getElementById("ddlResourceType").options.remove(indx); 动态添加select中的项option: document.getElementById("ddlResourceType").options.add(new Option(text,value));

上面在IE和FireFox都能测试成功，希望以后你可以用上。

其实用标准的DOM操作也可以，就是document.createElement，appendChild，removeChild之类的。

取值方面

function getvalue(obj) { var m=obj.options[obj.selectedIndex].value alert(m);//获取value var n=obj.options[obj.selectedIndex].text alert(n);//获取文本 }

==============================================================================

1 检测是否有选中

if (objSelect.selectedIndex > - 1 ) { // 说明选中 } else { // 说明没有选中 }

2 删除被选中的项

objSelect.options[objSelect.selectedIndex] = null ;

3 增加项

objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );

4 修改所选择中的项

objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );

5 得到所选择项的文本

objSelect.options[objSelect.selectedIndex].text;

6 得到所选择项的值

objSelect.options[objSelect.selectedIndex].value;

原文转载至前辈：ChessZhang 和ㄓㄤㄑㄧㄤ

【本文地址】

JS如何获取、设置、删除、添加 select下拉菜单的value以及文本内容

JS如何获取、设置、删除、添加 select下拉菜单的value以及文本内容

今日新闻

推荐新闻