如何獲取JavaScript選擇框的選定文本

<select name="selectbox" onchange="alert(this.value)">

但我想選擇的文本。我試過這種方式

<select name="selectbox" onchange="alert(this.text)">

它顯示未定義。我發現如何使用DOM來獲取文本。但我想這樣做，我的意思是喜歡使用this.value。

2010-07-03 Aajahid

107

this.options[this.selectedIndex].innerHTML

應該爲您提供所選項目的「顯示」文本。像你所說的，this.value只提供了value屬性的值。

2010-07-03 07:17:58

謝謝這工作。 – Aajahid 2010-07-03 08:03:12

我不喜歡它。雖然我確定它可以在當前的瀏覽器上工作，但它是基於DOM元素的代碼和舊式表單操作代碼的混合體。 'options'返回一個'Option'對象列表，我不確定它是否在'

Tim，'Option'對象與'HTMLOptionElement'對象相同。如果你反對使用'options'，你可以使用'children'或'childNodes'代替（不記得確切的是哪一個;我認爲它們都可以） – 2010-07-04 00:45:59

爲了讓你可以做以下所選項目的值：

this.options[this.selectedIndex].text

這裏選擇的不同options進行訪問，並SelectedIndex用於選擇所選擇的一個，那麼它的正在訪問text。

閱讀更多關於選擇DOM here。

2010-07-03 07:17:41 Oded

'this.options [this.selectedIndex] .value'與'this.value'完全相同，對不起。 – 2010-07-03 07:18:29

@Delan Azabani - 答案已更新。 – Oded 2010-07-03 07:19:19

當我使用this.options [this.SelectedIndex] .text錯誤控制檯說 - 錯誤：this.options [this.SelectedIndex]未定義 – Aajahid 2010-07-03 08:02:36

我知道沒有人是要求一個jQuery的解決方案在這裏，但可能是值得一提的是與jQuery你可以問：$('#selectorid').val()

2012-09-20 13:03:13 Michiel

只有在未設置選項值時才能使用。 – profitehlolz 2012-11-15 16:15:56

請試試這個代碼：

$("#YourSelect>option:selected").html()

2013-06-15 15:12:18

超級簡單！謝謝！ – Louie 2015-02-28 20:44:43

非常感謝！這會返回組合框中所選項目的值 – 2017-01-27 17:56:29

只需使用

$('#SelectBoxId option:selected').text();對於獲取文本中所列

$('#SelectBoxId').val();對於入門選擇指數值

2014-02-18 13:01:30

雖然這對於jQuery非常適用，但OP僅將javascript列爲原始標記。儘管如此，還有很多人使用jQuery。 – Sablefoste 2015-07-29 21:33:24

回答