如何使用getElementsByClassName來確定所選下拉選項的值？

Question

如何使用javascript確定所選下拉選項的值。我不能使用id選擇器，所以我想用document.getElementsByClassName。我知道這會返回一組值。 下面是一個簡單的代碼，我想使用：

<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); 

} 

但它不工作。我把所有相關的問題都列爲紅色，所以請不要給我一個其他問題的鏈接。

Answer 1

document.getElementsByClassName返回HTMLCollection。即使你只有一個元素，它是e[0]，而不是e。

Answer 2

，如果你的意思是值裏面是什麼option的文本，然後使用下面的代碼來代替：

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

I.E.將value更改爲text。

Answer 3

要獲得getElementsByClassName返回的HTMLCollection中的第一個元素，請使用[0]。然後得到它的value。

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