如何使用 getElementsByClassName 确定所选下拉选项的值？

Question

如何使用 javascript 确定所选下拉选项的值。我不能使用 id 选择器，所以我尝试使用 document.getElementsByClassName。我理解 returns 一组值。这是我尝试使用的简化代码：

<div id="MDL" class="dates">
<p>Select Dates and Price</p>
<select class="datevalue">
    <option value="30">17th July - &pound;30</option>
    <option value="45">17th July - &pound;45</option>
    <option value="70">17th July - &pound;70</option>
    <option value="30">18th July - &pound;30</option>
    <option value="45">18th July - &pound;45</option>
    <option value="70">18th July - &pound;70</option>
</select>
</div>
<input type="button" id="book" VALUE="Buy Now" onClick="book()">

function book() {
var e = document.getElementsByClassName('datevalue');
alert(e.options[.selectedIndex].value);

}

但是没用。我已经将所有相关问题都标记为红色，所以请不要向我发送 link 其他问题。

Answer 1

document.getElementsByClassNamereturns一个HTMLCollection。即使只有一个元素，它也是 e[0]，而不是 e。

Answer 2

如果您所说的值是 option 中的文本，那么请改用以下代码：

alert(e.options[e.selectedIndex].text);

即将 value 更改为 text。

Answer 3

获取HTMLCollection returned by getElementsByClassName, use [0]. And then get its value中的第一个元素。

document.getElementsByClassName('datevalue')[0].value

如何使用 getElementsByClassName 确定所选下拉选项的值？

How can I determine the value of the selected dropdown option using getElementsByClassName?

javascript

select

html-select

getelementsbyclassname