javascript获取select标签下的option的value求解？

Posted 2023-04-02

<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
为什么是[object htmlOptionElement]呢？
var secondElement=document.getElementById("second");
alert(secondElement[secondElement.selectedIndex]);
但是有时候却可以，求解？？？
我是给一个按钮加事件的，故是先选中某个option，然后点击按钮触发事件。而不是一运行javascript代码就弹出信息框的，因为那样根本就没有选中option的机会

页面加载时，因为没有任何选中项，所以 secondElement.selectedIndex 值是 -1，secondElement
[-1]为undefined，所以alert()会弹出 undefined 或 一个空的对话框；

如果你用鼠标选中了“选项9”，secondElement.selectedIndex 值是 0，secondElement
[0]为"<option value="选项9">选项9</option>"，所以alert()会弹出 [object HTMLOptionElement]

把代码做一些修改：

<option value="选项9">选项9</option> 修改为
<option value="选项9" selected>选项9</option>

alert(secondElement[secondElement.selectedIndex]); 修改为 alert(secondElement[secondElement.selectedIndex].value);追问

正解，是我大意了

参考技术A

本来就应该html dom 的option啊，secondElement本身不是节点集合，只是一个select元素节点，但是他有很多子节点，options,这个数组表示的意思不是有一堆select元素选择其中一个，是select的子节点的意思这种写法不符合标准dom写法  因为select和option属性通常是在一起的，后者被认为是前者的一部分，但不是任意的子节点都能这样写的，只有表单对象可以吧

<div id='second'>
     <p></p>
</div>
<script>
       window.onload=function()
          var secondElement=document.getElementById("second"); 
             alert( secondElement);         
             alert(secondElement[0]);    //这样就不会得到任何对象
       
      
</script>


<form id='second'>
     <input type='text'/>
</form>
<script>
       window.onload=function()
          var secondElement=document.getElementById("second"); 
             alert( secondElement);         
             alert(secondElement[0]);    //这样就能得到input对象
       
      
</script>

 

本回答被提问者采纳

JavaScript怎样获取select标签当前选择的值呢？

怎么获取select标签当前选择的选项呢 比如 <select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option>

如果select标签是有id属性的，如
<select id=xx>...
则用下述方法获取当前选项的值：
var v = xx.value;
或
var v = document.getElementById("xx").value; //此方法兼容性好

如果select标签是有name属性的，如
<form name=form1>
<select name=xx>...
则用下述方法获取当前选项的值：
var v = form1.xx.value;
或
var v = document.getElementsByName("xx")[0].value;
如果同一页面含有多个name属性相同的标签，则上述[0]中的数字要改为相应的物理顺序号（从0起算）

如果select标签不含有任何可供定位的属性，如
<select>...
则用下述方法获取当前选项的值：
var v = document.getElementsByTagName("select")[0].value;
如果同一页面含有多个select标签，则上述[0]中的数字要改为相应的物理顺序号（从0起算） 参考技术A 对于以下select标签，获取当前选择的值得方式如下：

<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>
code:
一：javascript原生的方法
1:拿到select对象： var myselect=document.getElementById("test");
2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value： myselect.options[index].value;
4:拿到选中项options的text： myselect.options[index].text;