<select>要素で選択された<option>のテキストを取得する


156

以下では:

<select id="test">
    <option value="1">Test One</option>
    <option value="2">Test Two</option>
</select>

JavaScriptを使用して、選択したオプション(つまり、「テスト1」または「テスト2」)のテキストを取得するにはどうすればよいですか

document.getElementsById('test').selectedValue 1または2を返すのは、選択したオプションのテキストを返すプロパティはどれですか。

回答:


258
function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');

いつものように素晴らしいJavaScript!
doniyor 2017

3
この回答は古くなっています。以下の@davidjbの回答で、優れたHTML5ワンライナーを参照してください。
Christallkeks

1
@Christallkeks- 何も選択されていない場合、ワンライナーは例外をスローします。行が少ないほど、常に良いとは限りません。
Sean Bright

88

jQueryを使用する場合は、次のコードを記述できます。

$("#selectId option:selected").html();

30
彼はテキストを望んでいるので、おそらく使用する方が良い.text()
Muhd

5
と混同しないでください。$("#selectId option[selected]")「selected」属性を持つオプションが選択されますが、現在は選択されていない可能性があります。
mowwwalker 2014

より複雑に見えます。
NDEthos



28

HTML5でこれを行うことができます:

document.getElementById('test').selectedOptions[0].text

MDNのドキュメント(https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions)には、Chrome、Firefox、Edge、モバイルブラウザーを含む完全なクロスブラウザーサポート(2017年12月現在)が示されています、ただしInternet Explorerは除く。


+1、一方、これは進むべき道です。Firefoxチケットは修正されており、MS Edgeを開いてサポートしていることを確認するのも面倒でした。
Christallkeks

7

optionsプロパティが含まれているすべての<options>-そこからあなたが見ることができます.text

document.getElementById('test').options[0].text == 'Text One'

6

を使用selectedIndexして、現在選択されているものを取得できますoption

el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text


2

このスレッドが見つかり、選択したオプションテキストをイベント経由で取得する方法を知りたい場合は、サンプルコードを次に示します。

alert(event.target.options[event.target.selectedIndex].text);

1

選択リストオブジェクトを使用して、独自の選択オプションインデックスを識別します。そこから-そのインデックスの内部HTMLを取得します。そして今、あなたはそのオプションのテキスト文字列を持っています。

<select onchange="alert(this.options[this.selectedIndex].innerHTML);">
       <option value="">Select Actions</option>
       <option value="1">Print PDF</option>
       <option value="2">Send Message</option>
       <option value="3">Request Review</option>
       <option value="4">Other Possible Actions</option>
    </select>

説明を追加
HaveNoDisplayName

.innerHTMLすべての子とその属性を取得します。要素に子がない場合に機能しますが、子を持つ要素がある場合、意図したよりも多くの値を返します。
ヒップキス2016

1
<option> Children?</ option>タグの間にいくつの「子供」がいると思いますか?
クリーパースタンソン、2016

0

単純なjavascriptを使用した、jQueryなしの@arturと同様:

// @ Sean-brightの「elt」変数を使用

var selection=elt.options[elt.selectedIndex].innerHTML;

0

簡単でシンプルな方法:

const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;

1
このコードスニペットは問題を解決する可能性がありますが、なぜまたはどのように質問に答えるかは説明していません。コードの説明を含めてください。これ投稿の品質を向上させるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
Luca Kiebel 2018

これが簡単なのか、簡単なのかわかりません。find()選択したアイテムのインデックスがわかっているのに、なぜ使用するのですか?また、選択されているアイテムがない場合(<select multiple>)、エラーが発生します。
ショーンブライト
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.